Chrome DevTools 开发者工具 技巧 调试

https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks

 

1、console面板多行输入

Shift + Enter 可以换行，而不是执行代码

 

2、Ctrl + Shift + C 可以直接进入审查元素的模式

 

3、Ctrl + L 清除console历史

 

4、选择页面上面的一个元素，然后在console里面输入$0，这个元素就可以被脚本使用了，如果页面用了jquery那就使用$($0)

 

5、使用XPath $x(xpath) 来选择节点  $x('//img'):

However, the function also accepts an optional second argument for the path context - i.e $x(xpath, context). This lets us select a specific context (e.g an iframe) and run an XPath query against it.

var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body;
$x('//'img, frame);

which queries the images within the specified iframe.

6、console.dir(object) 可以查看某个对象所有的属性

 

7、console.time() 和 console.timeEnd() 用来计算时间

 

 

8、在timeline里面，如果看到有黄色带感叹号的三角形，意味着你的代码触发了 强制/同步 的布局事件，这些事件对页面性能有明显影响（回流）

 

更多关于 console

console.warn("1")  console.error("1")  console.info("1")   只是输入icon不同

 

console.assert(false, "My assertion always fails");

类似于单元测试中的断言，当前面的表达式为 false 的时候，输出后面的信息

 

console.count 用来统计被执行了多少次

 

Profiles 面板选中Collect JavaScript CPU Profile，点击开始然后刷新页面点击停止

1、Bottom Up视图按照函数对性能影响排序

2、Top Down视图反应调用栈性能

切换成chart视图之后，横坐标表示的是时间，竖坐标表示的是调用栈（call stack），对性能消耗大的图片越宽，因此重点关注很宽的图片，不管他们在调用栈里的高低