Chrome浏览器无疑是当今前端最受欢迎的工具。除了简单的界面、大量的应用插件、良好的代码规范支持和强大的V8解释器，Chrome开发者工具还提供了大量便捷的功能，方便我们在前端调试代码。我们的日常开发离不开Chrome。掌握Chrome调试技巧很可能会成为考量前端技术水平的标杆。

关于Chrome调试技巧的文章很多。基于自己的开发经验，希望从实际应用的角度再来谈谈这些功能，希望对大家有所帮助和启发。

常见快捷方式

在ctrl p项目中找到该文件，并在下面找到VueJS库文件：

成员函数位于ctrl shif o文件中，VueJS的nextTick接口如下：

代码片段随时编写代码

Chrome在souces页面提供了代码片段，我们可以在这里随时编写JS代码，运行结果会打印在控制台上。代码是全局保存的，我们可以在任何页面上查看或运行这些代码，包括新的选项卡。

我们不再需要创建一个新的HTML页面来运行一小段JS代码。代码片段的便利之处在于，你只需要打开chrome就可以编写一个可以在任何页面上运行的JS代码，每个使用过代码片段的人都知道，代码片段编辑器相当于崇高的文本。

在一个项目中，我需要将超过100页的word文档导入到页面中。考虑到后续的样式编写，页面的HTML结构如下：

Div class=' help-page _ row ' H3 class=' help-page _ title ' title/H3 p class=' help-page _ desc ' paragraph/p p class=' help-page _ desc ' paragraph/p/Div手动将100多页的内容合并到上面的HTML结构中，这样太费时不切实际，所以我决定用JS解析出文档内容的标题和段落，用HTML进行包装。

因为不需要视图支持，所以以片段形式编写这段代码是最好的选择。经过几次调试和修改，最终结果如下：

最后，将Word文档的内容复制到片段中，执行解析功能，并将最终解析的HTML结果打印到控制台：

片段可以使用控制台的复制界面，将分析结果直接复制到剪贴板更方便

当使用代码片段来完成这样的轻量级工作时，我们不需要追求代码的可读性和可维护性，我们的代码只需要在大多数场景下正常运行。

但是，为了满足大多数场景，需要反复调试和修改代码。Snippets最实用的一点是可以随时编写、调试和修改！

复制格式复制

在项目开发中，我们可能需要在本地复制后台数据，并将其作为本地数据进行调试。

如果在后台返回未格式化的JSON数据，我们在本地调试时不可避免地会遇到手工修改数据的情况，对于格式不美观的JSON数据进行修改会异常困难。

说到JSON格式化，我们首先想到的是JSON.stringify的格式化功能，比如四个空格的缩进：

JSON . stringify({ name : ' lxjwlt ' }，null，4)；

每次JSON数据格式化的时候写这个代码太麻烦了。我们可以通过chrome控制台的复制界面来解决这个问题：

1.从请求项目的右键菜单中选择复制响应。2.使用复制接口在命令行中处理数据。3.获取格式化的JSON数据

不仅仅是对象，复制接口可以复制任何数据。这里使用了复制数组或对象过程中美化数据的功能。

Iframe调试

如果我们使用Webpack server工具webpack-dev-server来访问项目的开发页面，我们会发现开发页面被嵌入到iframe中进行呈现。

由于Chrome控制台的默认上下文是window.top，因此内嵌在iframe中的开发页面无法在控制台中直接操作。如果我们想对iframe中的页面进行DOM操作，或者执行类库API，我们首先通过contentWindow获取iframe的上下文，然后用语句：进行调试

//html iframe id=' iframe '/iframe//带有(document . getelementbyid(' iframe ')的控制台。content window){ inspect(document . body)；新Vue({ /*.*/});//做某事.}以上方法可以在任何浏览器上使用，但如果我们使用Chrome浏览器，Chrome控制台的上下文切换功能会更方便：

我们将上下文切换到iframe，控制台代码将基于iframe的上下文执行。如果您使用webpack-dev-server进行调试，您会喜欢这个功能。

调试没用？

Chrome控制台提供调试界面，可以传入函数。下次执行此函数时，调试器将自动调试此函数中的断点。

我们可以清楚地在代码中设置断点进行调试。为什么要用debug来设置它们？难道只是抛弃鼠标，用命令行强制？

在我看来，debug函数还提供了定位功能，可以让我们快速找到指定的函数。下面展示了如何调试VueJS的数据驱动，以及如何找到VueJS数据驱动的代码入口。

众所周知，VueJS的数据驱动通过defineProperty方法封装了数据的getter和setter，并在此封装中实现了数据变化驱动视图同步修改的功能。如果要研究VueJS的数据驱动，首先要找到封装getter和setter的地方，我们可以通过调试接口来定位。getter方法用作下面的示例。

首先，我们知道VueJS实例中的数据是mapping _data属性中的值：

var VM=new Vue({ data : { name : ' lxjwlt ' } })；vm.name===vm。_ data.name//true，所以我们要查找的数据实际上在VueJS实例的_data属性中。接下来，我们通过getOwnPropertyDescriptor获取数据的getter函数：

object . GetOwnPropertyDescriptor(VM。_数据，“名称”)。得到；一旦找到getter函数，我们就可以使用调试接口在断点处调试它：

Debug(对象。getowntpropertysdescriptor(VM。_数据，“名称”)。get)这样，当我们获取vm.name数据时，自然会触发数据的getter函数，从而触发断点调试，自动定位函数：

以后要调试或者定位公共API，试试Chrome的调试接口功能！

条件断点

在Chrome中，我们可以为断点设置一个表达式。当表达式为真时，断点调试将生效。这是条件断点。

有了条件断点，我们可以在调试代码时更准确地控制代码断点的定时，尤其是当一段代码反复运行时，条件断点可以跳过大多数情况，只关注我们想要的场景。除此之外，条件断点调试还有另一种用法。

在断点调试中，我们经常会检查当前代码的执行状态。如果操作繁琐，我们可以使用条件断点来添加自动化操作，以帮助我们减少一些工作量。

例如，如果我们想在断点出现后查看DOM元素，断点条件可以写成如下形式：

//当DOM元素满足断点的某个条件时，看这个元素elem。hasattribute(' class ')inspect(elem)；如果操作的返回值不明确，我们可以强制操作返回true，从而不影响断点的条件判断：

elem . hasattribute(' class ')(inspect(elem)| | true)；或者按分支写：

if(elem . hasattribute(' class '){ inspect(elem)；真的；}

再举个例子，在VueJS的调试中，我们经常需要知道VueJS实例的当前状态，所以每次触发断点调试的时候，都可以使用clear接口先清除控制台历史输出，然后打印出VueJS实例的当前状态：

vm.sum 4 (clear() || vm。$ log()| | true)；

如果变量是在条件断点中定义的，则该变量是在全局范围上定义的，即在窗口对象上定义的

异步调试

Chrome调试器的异步模式是一个为调试异步函数而设计的函数。

在Promise被广泛使用的今天，我们都知道Promise的回调是异步执行的。在异步模式启动之前，传输栈只记录了回调函数本身，我们找不到代码执行的顺序，给我们调试带来了很大的困难。异步模式可以解决这个问题：

当异步模式打开时，异步函数之前的调用堆栈将被记录，调用堆栈中的代码执行状态将被保留。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。