Chrome调试技巧

调试技巧，对于前端小白来说，是必不可少的技能。掌握各种调试技巧，可以快速定位问题、帮助分析逻辑错误等。
本文介绍一些Crome浏览器中简单的JS调试技巧，也许你尚不知如何调试，赶紧趁此机会填补空白。

一：打开 Chrome 开发者工具的方法：
在主菜单中选择“更多工具”菜单 > 点击开发者工具。
在页面任何元素上右键，选择“检查”。
在 Mac 中，按下 Command+Option+I；在 Windows 与 Linux 中，按下 Ctrl+Shift+I。

image.png

1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息
2.设备图标：点击它可以切换到不同的终端，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例
3Elements 标签：用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息
4.Console控制台：用于打印和输出相关的命令信息
清空图标：清空 console 控制台
top ： 在默认状态下，Console 的上下文（context）为 top（顶级）。
过滤： 对控制台的输出进行过滤。
设置： Hide network 隐藏诸如 404 之类的网络错误。
Preserve log  控制台将会在页面刷新或者跳转时不清空记录。
Selected context only  勾上后可以根据前面 top 选择的上下文来指定控制台的日 志记录范围。
User messages only  隐藏浏览器产生的访问异常之类的警告。
Log XMLHttpRequests 记录 XMLHttpRequest 产生的信息。
Show timestamps — 在控制台中显示时间戳信息。
Autocomplete from history — Chrome 会记录你曾经输入过的命令，进行自动补全。
5.Sources js资源页面：这个页面内我们可以找到当然浏览器页面中的js 源文件，方便我们查看和调试，很多时候，我们看到的js代码是压缩之后的代码，我们可以点击下面的{}大括号按钮将代码转成可读格式
6.Network 网络请求标签页：可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求
7.Timeline标签页可以显示JS执行时间、页面元素渲染时间，不做过多介绍

8.Profiles标签页可以查看CPU执行时间与内存占用，不做过多介绍

9.Resources标签页会列出所有的资源，以及HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除 不做过多介绍

10.Security标签页 可以告诉你这个网站的安全性，查看有效的证书等

11.Audits标签页 可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告
二，调试技巧
1 Alert
在js发展的初始阶段，通过Window对象中内置的alert方法来调试，是最原始的调试方法。alert调试方式弹出的调试信息，会遮挡部分页面内容，界面不太友好。并且alert会阻碍页面的继续渲染。

image.png

2.console.log
console.log 将会在控制台中打印输出内容
有些时候，你想查看一组复杂的对象。你可以用 console.log 打印并滚动查看，或者使用 console.table 来更加轻松地查看你所处理的对象
3.Sources断点
给一段代码添加断点的流程是“F12（Ctrl + Shift + I）打开开发工具”——“点击Sources菜单”——“左侧树中找到相应文件”——“点击行号列”即完成在当前行添加/删除断点操作。当断点添加完毕后，刷新页面JS执行到断点位置停住，在Sources界面会看到当前作用域中所有变量和值，只需对每个值进行验证即可完成我们题设验证要求。
或者，在进行项目调试时，可以通过search某一个函数来进行定位，快速找到需要断点的位置，进而进行断点调试

image.png

我们打开Sources面板后其实会在界面中看到如下内容

image.png

Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。
Step over next function call：执行到下一步的函数调用（跳到下一行）。
Step into next function call：进入当前函数。

Step out of current function：跳出当前执行函数。
Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。
Pause on exceptions：异常情况自动断点设置。
接下来我们就可以一行一行去看我们的程序代码，查看每一行执行完毕之后，各个变量的变化情况
4.Debugger断点
我们在开发中偶尔会遇到异步加载html片段（包含内嵌JS代码）的情况，而这部分JS代码在Sources树种无法找到，因此无法直接在开发工具中直接添加断点，那么如果想给异步加载的脚本添加断点，可以通过debugger来实现。通过在代码中添加”debugger;”语句，当代码执行到该语句的时候就会自动断点。接下去的操作就跟在Sources面板添加断点调试几乎一模一样，唯一的区别在于调试完后需要删除该语句。