Chrome调试工具

修改工具语言

Chrome调试工具_第1张图片

 就会变为

Chrome调试工具_第2张图片

CSS调试

1、ctrl+f提供查找元素

Chrome调试工具_第3张图片

 2、添加样式如果不记得名称可以填上几个字节,这样会列出所有有关的内容

Chrome调试工具_第4张图片

3、点击会快速到达样式位置

 4、其他 的样式类型       

Chrome调试工具_第5张图片

 5、固定状态

Chrome调试工具_第6张图片

 6、对某个元素的修改避免其他同组的元素发生改变

Chrome调试工具_第7张图片

7、复制其他网页的样式

选择到元素,然后右键复制样式

Chrome调试工具_第8张图片

 Chrome调试工具_第9张图片

8、computed内的按钮

Chrome调试工具_第10张图片

 Chrome调试工具_第11张图片

9、layout内的按钮

会显示所有用到网格布局的元素

Chrome调试工具_第12张图片

 点击后会更好的观察布局Chrome调试工具_第13张图片

10、监听事件 

Chrome调试工具_第14张图片

 Console

1、追踪变量的变化Chrome调试工具_第15张图片

 如果发生更改,那么会显示出来

js事件

在代码中加入debugger

Chrome调试工具_第16张图片

 当运行到这个js后,会到这里暂停运行

然后点击右侧出现的面板进行调试

或者 在调试工具中添加断点

Chrome调试工具_第17张图片

 Chrome调试工具_第18张图片

 添加监听,如果出现点击将会暂停,并跳到相应的js里面

Chrome调试工具_第19张图片

如果不想去一些js,比如下面

Chrome调试工具_第20张图片

network

Chrome调试工具_第21张图片

你可能感兴趣的:(前端,网络,云计算,centos)