chrome欣赏器_chrome欣赏器下载 apk

　　信任绝大部门的前端是操纵Chrome进行开发的，一方面Chrome浏览器确实做得好，更重要的一方面是因为Chrome有一个无法匹敌的调试工具。用好这个调试工具可以前进编程坚守，资助快速地定位标题。

　　01打印

　　（1）console.table

　　最常用的打印是console.log，console.log偶尔间打印一些复杂的数据结构显得有点吃力，如打印一个元素是object的数组：

　　为了查察每个数组的元素，必需得一个个展开，就显得有点麻烦了，着实可以用console.table：

　　瞬间就变得很是清爽，同时console.table还支撑打印对象属性，如下的Student对象，有name和score两个属性：

　　（2）console.dir

　　console.log是偏重于字符串化的打印，而console.dir能递归打印对象的所有属性，如下打印一个dom结点：

　　console.log把它的html打印出来了，而console.dir把它的所有属性打印出来，利便进行检查。

　　（3）打印带样式

　　经常会看到有些网站会在节制台打印一些提醒语，并且这些提醒语还带样式，这个是用%c加上的样式：

　　02检查没有用的CSS/JS

　　Chrome 49新增了一个功能，能够检查页面上的CSS/JS没有用到的比例，如下打开devtools的Coverage标签栏，然后点记载按钮，刷新页面，页面加载完之后，点击禁止。就会表示页面用到和没用的CSS/JS占比。没有用到的用红色表示，用到的用绿色表示：

　　可以看到第二个CSS文件有大部份是没用到的，JS也有很大的比例没有用到。在上面中间的窗口会把详细没操纵到的代码标红，就能知道详细哪些代码没有被用到。可以看到，CSS有一半没有用到，因为有一些是小屏的响应式CSS，大屏没用到。另一些是common-chunk提出来的，所以可以考虑把大小屏的CSS分开（可是不恰当于内联Style），如下用媒体查询去加载不同的CSS：

　　link rel="stylesheet"href="large.css"media="screen and (min-width:500px)"

　　JS也是因为require了比较大的公有模块导致的，这些模块比较大，可是只操纵了其中小一部门功能，可考虑把大模块拆细，可是粒化太细或许会增加复杂度，所以要权衡一下。

　　这些功能可以用Chrome Canary尝鲜版的操纵。

　　03截全屏的功能

　　除了Corverage之外，Chrome 49还新增了截全屏的功能：

　　就不用去装一个第三方的插件。

　　04debugger

　　可以在代码里面写一句debugger，一旦运行到dubugger就会自动卡在何处进入调试模式，操纵这个有两个优点，一个是不用手动去展开文件找到对应的位置，因为如今许多人都用第三方的打包，导致跑的代码和当地的代码行数不能保持平等，所以须要去搜索响应地代码，比较麻烦。此外一个优点是：今世码是一个很大的轮回的时间，并且在特定的情况下代码会挂，因为要轮回好多次，所以偶尔间不或许在轮回里面打个断点，然后不绝地跳到下一个断点直到呈现标题。所以这时间怎么办呢？可以用前提团结debugger。如下代码：

　　var scores = [90,70,58,60, ...];var newScores = [88, 55, 60, ...];for(var i = 0; i scores.length; i++){ for(var j = 0; j newScores.length; j++){ if(scores[i] !== newScores[j]){ scores.push(newScores[j]); } }}

　　发生了死轮回，怎么定位在何处出了标题呢？方法一在轮回里面打个断点，一次次实施阐明，直到发现标题，方法一偶尔间挺好用的，或许很快就可以发现标题了。方法二，发生死轮回了必定是i不绝得在变大，可是为什么i不会禁止变大，可以加个前提，当达到那个前提的时间进入断点：

　　if(i 1000000){debugger}

　　如上面第7行，当i大于1000000时进入断点，这个时间检查一下，发现scores已经酿成了一个很大的array了：

　　所以可以进一步发现标题。这样就打点了大轮回里面打断点调试的标题。

　　操纵debugger尚有一个小本事——可以打点一个检查页面元素的标题。如下图所示，当hover到那个绿色的标签时，会出来个详情框：

　　如今我要检查这个详情框，可是我一检查，鼠标脱离了，那个框也消失了，导致检查不了了，因为触发了mouseout事故，那怎么办呢？假设这个框是css的hover节制的，那么可以用节制台的伪类窗口，在:hover何处打个勾，就有hover的成果：

　　可是这个不是用css的hover实现的，所以没举措用这个。这里有一个小本事，就是用debugger让页面卡住了，mouseout事故的响应函数就不会实施了。如下，先在左边的节制台点一下进入编辑模式，然后把鼠标挪到左边的页面的标签，让那个框出来，然后再在节制台输入debugger回车，这个时间页面就卡住了，接着就可以愉快地进行检查了，如下图所示：

　　05IOS真机模拟

　　这个当然和Chrome没关系，可是也可以提一下，Mac的XCode可以开一个ios系统，利用如下图所示，然后可以用Mac的Safari接连这个ios里面的Safari进行检查：

　　如下例子调试iPhone的Safari：

　　上面右图弹了一个原生的下拉，因为它是真的ios系统，这个的优点就在于不用老是连真机调试，恰当于有Mac可是没有iPhone的同砚，弱点是没举措和真机100%一样，例如它不弹键盘，它的输入是用电脑键盘的输入。不过它是100%的ios系统，此外须要装一个很大的XCode。

　　06用console.trace追踪函数挪用

　　如今遇到了一个标题，就是点击X按钮的时间重复发了两个请求，如下下图的红框：

　　当上一次请求还没完成又要发一个新的请求的时间，代码里面会把上一次请求abort掉，所以会看到上一个变红了：

　　可是这样照旧会有标题，所以要看一下究竟是在何处触发了两次请求。因为请求会走一个通用的发请求的接口，所以可以在何处追踪一下：

　　ajax: function(curPage){ console.trace("search.js ajax"); //other code}

　　然后节制台就打印了两次trace：

　　别离点开这两次的代码，就会发现，两次触发别离是：一次是X的click事故调的搜索，此外一次是map的zoom_changed触发的搜索，知道了挪用的处所就好办了，就可以做进一步阐明，然后去掉其中一个。

　　此外一个看函数挪用栈的处所是在右边的窗口：

　　挪用栈最多只打印5个，偶尔间或许会不太够。

　　07查察某个函数绑的事故

　　节制台Elements的下面有个Event Listeners，点最反面那个可以看到和它最干系的事故

　　其次，用好快捷键可以事半功倍，常用的快捷键：

　　F10 下一步

　　F8 跳到下一个断点

　　command/ctrl + ; step into进入函数实施

　　shift + command/ctrl + ; step out跳出当前函数

　　一个实例——研究一下鼠标hover的时间它的界限是怎么画出来的：

　　首先定位到mouseover事故，因为它必定是mouseover触发的：

　　一打开发今世码是压缩的：

　　压缩的代码可以点左下角的大括号，进行美化：

　　然后再用快捷键一步步的step over/step into，如果你不用快捷键老是一个个去点那个调试的按钮照旧挺麻烦的。如果不小心过了，就从头来一遍。最后会找到在这个函数里面画的界限：

　　08Open in Sources Pannel

　　在sources pannel面板如果要查察某个源文件的时间，须要一步步展开文件夹，这样比较麻烦，而在network面板里面可以用各种筛选，可是在network里面是不能打断点的，这个时间可以用右键，然后点击Open in Sources Pannel的功能：

　　就会在sources面板打印响应的文件，然后可以在sources里面进行调试了。

　　09模拟断网做一些出错处置惩罚处罚

　　devtools还支撑模拟收集情况，例如可以模拟断网的情况，突然挂掉了会怎么样，然后响应的做一些出错处置惩罚处罚：

　　如上图出错的时间给一个提醒文案，同时恢复upload按钮，就可以让用户再从头上传。

　　10研究重绘

　　devtools有一个Renders可以用来研究重绘，如下图右下角，把面板里面的勾都打上：

　　然后点击左边的页面的菜单按钮研究重排的情况。右上角黑色的框会表示当前的帧率。左边变蓝的地域表示须要进行重绘，因为要弹一个蒙层，所以页面可视地域进行重绘了。同时可以看到当前帧率是59，并且整一个过程帧率底子保持在55以上，因为这个是用transform做的动画，所以帧率比较高。再来看一个用postion做的动画：

　　可以看到帧率跌到了45，并且有相当一小段时间帧率是在50以下，所以用postion做的动画流畅度没有transform的好。

　　11用timeline看实施时间

　　如下图所示，可以查察许多有用的信息：

　　这个我在《Effective前端6：禁止页面卡顿》有详细的介绍。

　　12检查内存泄漏

　　底子上只要存在一个引用就不会进行GC采纳，有些DOM节点没有append到DOM，可是存在引用指向它，它就是一个星散的DOM结点，这个时间发生了DOM内存泄漏，如下面的代码：

　　var detached = null;button.on(“click”, function(){ detached = document.(“div”);})

　　因为闭包里面有一个变量指向一个星散的DOM结点，所以创建的那个变量指向的内存空间不会被释放掉。这个时间可以拍一张内存堆的快照，Chrome会帮你把这些星散DOM结点用黄色标出来。

　　先切到Profile标签，选中Take Heap Snapshot选项，然后点击Take Snapshot按钮：

　　然后就会把当前内存的操纵情况表示出来：

　　在搜索框里搜一下detached，出来的成果里面红色的表示已经星散且没有引用，而黄色表示已经星散且有引用，所以重点是看这些黄色的。展开其中一个阐明一下，可以看到这个HTMLDivElement有一个ImageShower里的$imgContainers指向它，所以导致它的内存空间不能被释放。详细看下代码可以看到这是DOM已经删了，可是图片懒惰加载里面没有清掉引用。所以打点举措是当删掉DOM节点时，把那个ImageShower里面的变量置为null，或许把整个实例对象置为null。

　　13查察内存斲丧

　　为了查察某个利用的内存斲丧情况，可以用Record Allocation的功能记载某个利用内存的分配情况。

　　点了start按钮之后，进行一个利用，例如弹一个框，然后点击禁止记载的图标，就会出来操纵情况的阐明，如下图所示：

　　点开最上面的Object，可以看到这个Object数组开销了553K的内存（下图倒数第二列第一行）：

　　展开其中一个Object，可以看到它是一个jQuery对象，每一个斲丧了88Kb：

　　而总的内存可以用Chrome的使命治理器查察：

　　可以看到当前页面斲丧了193Mb的内存。所以如果当你觉得页面的内存比较大的时间，或许重复某个利用之后页面的内存不绝增大，就可以用这种方法阐明一下。

　　14垃圾采纳

　　垃圾采纳可以在timeline里面查察，如下图所示：

　　蓝线何处JS Heap骤降，分析进行了一次垃圾采纳，如果发生得比较频繁的话，或许会有标题。

　　15查察连接时间

　　如下图所示：DNS阐明花了254ms，创建tcp连接花了1.98s，创建https连接花了1.69s，从创建完连接到吸取到第一个字节的数据(TTFB，Time To First Byte)等了4.3s，下载时间花了306ms（基于某次实施）。

　　此外图片的优先级会低于CSS/JS资源，并且统一个域最多只能同时加载6个资源，所以会有排队和等候时间，如下图所示：

　　本文阐明了一些devtools的一些比较好用的功能，团结自己的项目经历做了些现实的例子分析，渴望对大家有资助。

　　原文：www.renfed.com/2017/05/02/effectiv-chrome-devtools/

　　精选文章

↓↓↓