下面介绍如何更加高效的调试前端
chrome版本：版本 71.0.3578.98（正式版本） （64 位）
Tips1：console面板可以直接运行js
有时候我们想测试某段代码，就可以直接在console面板中执行就可以了。不需要再建立js，然后刷新浏览器。
1.png
如图，我直接输入console.log(123)，可以直接看到结果。console就是一个小小的Snippet运行器。比如我想看A的Ascii码，直接F12，然后再console运行"A".charCodeAt(0);，你就可以获得你需要的。有时候，一些简单的数据处理（排序，归集）之类的，我就是直接在console处理的，非常快就能获得你需要的结果。
Tips2：快速到达某个元素的标签处。
以前我是这样选中一个页面元素的：
F12打开调试面板、开启元素选择器、选中需要的元素。
然后，我发现可以直接对该元素右击，检查就可以直接到达对应元素标签处了。
选择元素2.gif
Tips3：快速清除指定网站的Cookie
因为chrome保存了很多我需要的cookie，所以我需要针对特定的网站进行清除。以前我是这样做的：
打开设置、高级、内容设置、Cookie、查看所有 Cookie 和网站数据
、搜索需要清除网站的cookie、点击删除。
现在我是这样做的：
直接点击地址栏前面的“查看网站信息”、点击Cookie、清除。
删除cookie.gif
不过这样子就只能删除当前网站相关的cookie。
插件篇
Tips4：快速清除缓存
以前我清除缓存是：Ctrl+Shift+Delete（打开设置、高级、清除浏览数据）、勾选需要清除的数据、点击清除。
现在，我需要一个插件Clear Cache Shortcut。安装完成之后，只需要点击一下，就可以清除你之前勾选的需要清除的数据（就像之前我只勾选了缓存的图片和文件，那么点击就只帮你清除该项）。
其实还能更快，我们为这个插件添加一个快捷键：
地址栏打开chrome://extensions/shortcuts
清除缓存.gif
之后，每次需要清除缓存，只需要按快捷键就可以清除了。
Tips5：快速切换至指定分辨率
这里需要一个插件：Window Resizer
分辨率.gif
同样，我们可以为各个分辨率设置对应的快捷键。所以开发的时候就可以快速切换了。
地址栏打开chrome://extensions/shortcuts，找到Window Resizer对应的快捷键。然后设置，设置完成之后，就可以使用了。预设好，开发的时候就能快速查看在各个分辨率下的效果了。
file.gif
Tips6：重新发起XHR请求
有时候我们需要调试后台的时候，需要让前台发起请求。大多数我们都是点击按钮触发（比如说保存，再点一次保存按钮就可以了）。不过如果那个请求没有绑定事件呢，如果想再次触发需要刷新页面，流程都跑 一遍。
不过，我们可以让某个请求重新发起。只需要进入Network面板、右键需要发起的请求、Replay XHR
xhr.gif
调试篇
Tips7：通过console面板查看全局变量相关的代码
有时候，我们想查看某个全局变量或者函数的代码，那么就可以通过console面板输入想查看的函数名称，然后双击，就可以直接到达对应的代码块了。比如下面，我想查看QRCode函数是怎么实现的，我就在console输入QRCode，然后双击，就可以了。同时，如果查看到压缩的代码，可以点击左下角的 {} ，chrome就帮你格式化了。
qrcode.gif
Tips8：通过请求查看发出请求的相关代码块
有时候，我们调试别人写的代码，但是无从下手。我调试一般是从请求下手，然后通过请求能够找到对应代码处。
将鼠标移至需要查看请求的initiator处，就可以看到调用这个请求的全过程。然后如果是ajax请求，一般就在ajax的上面一层。或者通过文件名就可以大概看到哪一个是执行该请求的文件。然后点击进去，就能直接定位到发出请求的地方。然后就可以分析、调试代码了。
请求源码.gif
Tips9：快速查看相关的代码[传统引入，非webpack构建]
很多时候，代码是我们自己写的，但是我们并不知道相关的JavaScript在哪里？所以只要我们知道该js文件的名称，就能快速达到想要查看的代码。
比如，下面的很简单的结构。我们引人了test.js的文件。那么，调试该怎么下手呢？其实在chrome的page栏，为我们保存了原始的文件结构。我们只需要打开需要调试的资源文件。
文件结构.jpg
打开调试面板、打开source栏、点击open file（或者ctrl+p）、输入test.js，然后就可以开始进行调试了。
打开资源文件.gif
Tips10：通过Resource查看相关的代码[webpack构建]
个人接触的webpack项目不多。不知道是否会受webpack的配置影响。不过我这里配置下是可以这样调试的。
在webpack打包的项目中，因为代码都被压缩混淆了，所有我们调试有时候也是无从下手。不过，chrome也为我们完整的保留了压缩混淆前的代码结构。在Page下面的 webpack://. 栏目下。我们可以完整的看到原始项目的结构以及组件了。我们就可以针对需要的组件进行调试了。不过，值得注意的是，当我们修改这些组件的代码之后再运行，会发现还是运行原来的。因为chrome正在运行还是压缩混淆之后的代码。而你修改的只是副本之类的。
当然了，我们有更好的选择，那就是前端框架自带的调试工具。我几乎都是使用调试工具进行调试了。
webpack_Trim.gif
Tips11：不需要使用console来watch变量
以前，我调试都是通过console，将变量打印出来，当然这个是一个调试的好办法。不过呢，chrome一直就有一个调试面板，我们可以尝试使用它。
通过以上或者更多的方法，我们就可以到达了我们需要调试的地方。然后设置需要调试的断点。就可以像普通的IDE一样进行调试。下面，我这是了一个全局变量和局部变量。在断点处都能看到这些变量的情况。然后在右侧的watch中也能看到当前的局部变量和全局变量。另外，我们也可以直接修改代码，然后ctrl+s保存，然后运行的就是我们修改之后的代码了。
var.gif
以上就是自己总结的经验，希望能够帮助到你开发
之后想到其他的会继续更新
网友评论