谷歌浏览器调试技巧

chrome控制台中console的用法：

https://blog.csdn.net/m0_37181377/article/details/80447465

 

chrome控制台功能介绍：https://blog.csdn.net/callmeCassie/article/details/86761931

 

谷歌浏览器调试技巧：

https://blog.csdn.net/wlyang666/article/details/81837428

https://blog.csdn.net/fjb2080/article/details/82016690

 

在编辑器中打印console.log($("#gqsz").find("iframe")[0].contentWindow.document.getElementById("zsdID"));就可以知道想要的对象是否拿到.

 

• console.table(obj/objArray)

 

• keys和values前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组

• console.count（这个方法非常实用哦）当你想统计代码被执行的次数

 

• monitor & unmonitor

monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。

而unmonitor(function)便是用来停止这一监听。

 

————————————篇二————————————

2、如果你想调试f函数，用debug(f)语句可以增加这种断点。

 

3、Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，可用于保存代码片段，帮你调试代码。

 

4、可以用Chrome开发者工具Sources标签页中的格式化按钮（Pretty Print Button）格式化压缩后的代码。

 

5、在Network面板，选择一个资源文件，右键Copy Response可快速复制响应内容。

 

6、利用媒体查询，这个主要是在Device Mode调节不同的分辨率显示。

 

7、选择Elements，按 Esc > Emulation > Sensors进行传感器模拟。

 

8、点击渐入效果样式图标（紫色图标），可以预览动画效果，并可对相应的贝塞尔曲线(cubic-bezier)进行调节动画效果。

 

9、在Source中按住Alt键并拖动鼠标进行多列内容选择。

 

10、Elements面板右键执行DOM元素节点，选择Force Element State或者点击右侧Toggle Element State图标可以出发伪类。

 

11、Network面板中选择一张图片，在右侧图片上鼠标右键选择copy it as a Data URI,就可以获取图片的Data URL (base64编码)。

 

12、通过按住Ctrl键可以添加多个编辑光标，同时对多处进行编辑。按下Ctrl + U可以撤销编辑。

 

13、Elements面板右侧的Style编辑器中，点击颜色十六进制编码前的小色块，会弹出一个调色板。

 

14、按下Alt键并且鼠标双击选择DOM元素前面的箭头，就会展开该DOM元素下的所有字节点元素.

 

15、快捷键：快速定位到行：快捷键 Ctrl+O(Mac: CMD+O)，输入：行号:列号 来进行定位