Chrome调试技巧

Chrome DevTools — JS调试

技巧

1. 将文件加入小黑盒，f10、f11下一步时可跳过小黑盒文件
   Sources菜单中找到js文件，打开文件后，右键菜单中选择Blackboxing script。
   
2. 取消小黑盒文件
   a、在Source菜单中找到js文件，右键菜单选择Stop Blackboxing。
   
   
   b、ctrl+shift+p，然后输入black，选择Show Blackboxing。
   

   第一步
   

   第二步
3. 由事件断点寻找业务代码
   a、点击click事件监听
   
   
   b、点击后，然后f11进入业务代码查看逻辑。
4. 查看函数/方法调用先后关系
   这个需要使用查看call stack(调用栈)，假如A调用了B，B调用了C，C调用了D，则代码暂停在D中的时候，call stack中就是排列着：

D
C
B
A

接着执行完D后，返回到C中执行，并暂停，call stack中就是排列着：

C
B
A

接着执行完C后，返回到B中执行，并暂停，call stack中就是排列着：

B
A

callStack调用演示.gif

可以执行 Restart Frame直接回跳到某一个栈函数，重新执行。

5. 【Performance菜单】中，放大、缩小、左移、右移
   选择部分后，可以使用 W、A、S 和 D 键调整您的选择。 W 和 S 分别代表放大和缩小。 A 和 D 分别代表左移和右移
6. 【Performance菜单】页面刷新时的节点
   在火焰图上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件
   
7. 合理使用will-changeCSS 属性 will-change 为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。当元素变化之前和之后通过脚本来切换 will-change 的值。
   例如：

var el = document.getElementById('element');
// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
  // 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
  this.style.willChange = 'transform, opacity';
}
function removeHint() {
  this.style.willChange = 'auto';
}

will-change官方文档

8. 手机的cpu和网速可能不如pc，要调低参数
   

   image.png
9. 快速定位点击事件对应的代码逻辑
   1、F12 打开devtool
   2、切换到Source，选择 event listener breakpoints 下的 Mouse下的 click 事件
   3、点击按钮，此时发现如果进入jquery这样的类库，可以script blackbox加入黑盒，跳过此文件中的暂停。重新刷新页面后，再次点击，这次发现直接跳过了jquery。(注意：script blackbox加入黑盒的必须是jquery.min.js原版，而不是jquery.min.js:formatted版本。)
   4、耐心的不断的F11，知道进入点击代码为止。
10. 查看函数调用栈call stack

<button onclick="myFunction()">跟踪轨迹</button>
<script>
function myFunction() {
  myOtherFunction();
}
function myOtherFunction() {
  console.trace();
}
</script>

控制台输出

11. 代码执行计时器time和timeend

console.time('testForEach');
// (写一些测试用代码)
console.timeEnd('testForEach')
//输出：testForEach: 0.00390625ms

12. 以表格形式打印对象

json={a:1,b:2,c:{c1:1,c2:2,c3:3}}
console.table(json)

控制台输出

13. 查看内存使用情况
    如果你发现性能问题很难分析，可能还要考虑是否有内存泄露，你可以使用console.memory(注意memory是console的属性，不是函数)，来查看当前的堆的使用情况。usedJSHeapSize表示：JS 对象(包括V8引擎内部对象)占用的内存数totalJSHeapSize表示：可使用的内存jsHeapSizeLimit表示：内存大小限制
    通常，usedJSHeapSize不能大于totalJSHeapSize，如果大于，有可能出现了内存泄漏。参考文档
    
14. newwork中查看各请求资源的依赖关系
    通过按住Shift并且把光标移到资源名称上，可以查看该资源是由哪个对象或进程发起的(请求源)和对该资源的请求过程中引发了哪些资源(依赖资源)。在该资源的上方第一个标记为绿色的资源就是该资源的发起者(请求源)，有可能会有第二个标记为绿色的资源是该资源的发起者的发起者，以此类推。
    
    
    在该资源的下方标记为红色的资源是该资源的依赖资源。
    
15. 代码非正常结束，但是控制台没有报错
    这种情况可能是错误代码被包含在了try catch中，可使用开启控制台异常捕获断点模式，
    

    未开启捕获try中异常
    

    开启捕获try中异常

常见优化方案

下面是一些常见的CSS问题

1. 大开销样式计算影响响应或动画
   任何会更改元素几何形状的 CSS 属性，如宽度、高度或位置；浏览器必须检查所有其他元素并重做布局。避免会触发重排的CSS属性
2. 复杂的选择器影响响应或动画
   嵌套选择器强制浏览器了解与所有其他元素有关的全部内容，包括父级和子级。尽量在CSS中引用只有一个类的元素