如何更加高效的调试前端chrome版本71.0.98

下面介绍如何更有效地调试前端

Chrome版本：版本71.0.3578.98（正式版）（64位）

提示1：控制台面板可以直接运行js

有时，当我们想测试某些代码时，可以直接在控制台面板中执行它。无需构建js和刷新浏览器。

1.png

如图所示，我直接输入console.log（123)，我可以直接看到结果。Console是一个小的Snippet运行程序。例如，我想查看A的Ascii代码，并且我可以直接按F12，然后运行控制台。“ A” .charCodeAt（0);，您可以得到所需的内容。有时，一些简单的数据处理（排序，收集）等等，我直接在其中处理控制台，您可以快速获得所需的结果；或者可以转到“网络”面板，拦截网站的js，然后修改该js，然后直接在控制台面板上运行，以达到修改源代码的效果js。Tips2：快速到达元素的标签。

我曾经选择这样的页面元素：

F12打开调试面板，打开元素选择器，然后选择所需的元素。

然后，我发现可以直接在元素上单击鼠标右键，然后直接将其检查到相应的元素标签。

选择元素2.gif

提示3：快速清除指定网站的cookie

由于Chrome保存了很多我需要的cookie，因此需要针对特定​​网站清除它们。我以前这样做过：

打开设置，高级，内容设置，cookie，查看所有cookie和网站数据

，搜索需要清除网站的Cookie，然后单击以删除。

现在我这样做：

直接单击地址栏前面的“查看站点信息”，再单击Cookie，然后清除。

删除cookie.gif

但这只会删除与当前网站有关的cookie。插件文章Tips4：快速清除缓存

我以前通过以下方式清除缓存：Ctrl + Shift + Delete（打开设置，高级，清除浏览数据），检查需要清除的数据，然后单击清除。

现在，我需要一个插件“清除缓存快捷方式”。安装完成后，您只需要单击以清除以前检查过的要清除的数据（就像我之前只检查过缓存的图片和文件，然后单击只会为您清除该项目）。

实际上，它可以更快。让我们为该插件添加一个快捷键：

在地址栏中打开chrome：//扩展名/快捷方式

清除cache.gif

之后，每次您需要清除缓存时，只需按快捷键即可将其清除。提示5：快速切换到指定的分辨率

此处需要一个插件：Window Resizer

Resolution.gif

同样，我们可以为每种分辨率设置相应的快捷键。这样您就可以在开发过程中快速切换。

在地址栏中打开chrome：// extensions / shortcuts，然后找到与Window Resizer对应的快捷键。然后进行设置，设置完成后即可使用。这些预设很好，您可以在开发过程中以各种分辨率快速检查效果。

file.gif

提示6：重新启动XHR请求

有时候，当我们需要调试后台时，我们需要让前台发起一个请求。我们大多数人都是通过单击按钮触发的（例如，保存，只需再次单击保存按钮）。但是，如果请求未绑定到事件，则如果您想再次触发它，并且需要刷新页面，则过程将再次运行。

但是，我们可以重新发起请求。只需进入“网络”面板，右键单击要启动的请求，然后重播XHR

xhr.gif

调试技巧7：通过控制台面板查看与全局变量相关的代码

有时，我们要查看某个全局变量或函数的代码，然后我们可以通过控制台面板输入要查看的函数的名称，然后双击以直接到达相应的代码块。例如，在下面，我想看看QRCode函数是如何实现的。我只是在控制台中输入QRCode并双击它。同时，如果您看到压缩的代码，则可以单击左下角的{}，Chrome会为您设置格式。

qrcode.gif

提示8：按请求查看请求函数调用堆栈

有时，我们会调试其他人编写的代码，但是没有开始的方法。我通常从请求开始调试，然后可以通过请求找到相应的代码。

将鼠标移到需要查看该请求的启动器上，您可以看到调用此请求的整个过程。然后，如果它是ajax请求，则通常在ajax之上一层。或通过文件名，您可以大致看到执行请求的文件。然后单击，您可以直接找到发出请求的位置。然后，您可以分析和调试代码。

请求源代码。gif

Tips9：快速查看相关代码[传统介绍，非Webpack构造]

很多时候，代码是由我们自己编写的，但是我们不知道相关的JavaScript在哪里？因此，只要知道js文件的名称，我们就可以快速找到我们要查看的代码。

例如，以下非常简单的结构。我们介绍了test.js文件。那么，如何开始调试？实际上，在chrome的页面栏中，原始文件结构已为我们保存。我们只需要打开需要调试的资源文件即可。

文件structure.jpg

打开调试面板，打开源代码栏，单击打开文件（或ctrl + p），输入test.js，然后即可开始调试。

打开资源文件.gif

提示10：在开发过程中，通过Resource [webpack build]查看相关代码

个人联系的webpack项目并不多。我不知道它是否会受到webpack配置的影响。但是我可以在我的配置下像这样调试。

在webpack打包的项目中，由于代码被压缩和混淆，因此有时我们无法进行调试。但是，chrome还可以在压缩和混淆之前完全保留我们的代码结构。在webpack：//下。页下的列。我们可以完全看到原始项目的结构和组件。我们可以调试所需的组件。但是，值得注意的是，当我们修改这些组件的代码然后运行它时，我们会发现原始代码仍在运行。因为chrome正在运行或正在压缩混淆代码。而您修改的只是副本或其他内容。

当然，我们有一个更好的选择，它是前端框架随附的调试工具。我几乎总是使用调试工具进行调试。

webpack_Trim.gif

Tips11：无需使用控制台来监视变量

之前，我使用控制台在调试期间打印出变量。当然，这是调试的好方法。但是，Chrome一直都有调试面板，我们可以尝试使用它。

通过以上或更多方法，我们可以到达需要调试的地方。然后设置需要调试的断点。您可以像普通的IDE一样进行调试。下面，我有一个全局变量和一个局部变量。这些变量可以在断点处看到。然后，您可以在右侧的手表中查看当前的局部变量和全局变量。此外，我们还可以直接修改代码，然后将其保存为ctrl + s，然后运行修改后的代码。

var.gif

提示12：调试并使用“调用堆栈”查看函数调用堆栈。

ezgif-1-38af0579d0bd.gif

提示13：在调试过程中，终止当前运行的JavaScript。

长按“继续”按钮，将出现一个下拉列表，包括“继续”和“停止”。选择停止后，整个脚本将停止运行。

ezgif-1-0e9220e80e5e.gif

提示13：模拟弱网络环境。

打开“网络”面板的选项，您可以看到多个网络速度预设：离线，快速3G，慢速3G

image.png

选择慢速3G后，速度变得非常慢。 10秒内上传1kb json

image.png

还支持自定义速度限制（点击自定义->添加）：

image.png

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-355652-1.html