四、断点

代码断点

◆设置断点

在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断电, 在循环中需要断点时比较有用；
断点后可以查看堆栈, 变量信息:

◆在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信息时比较有用：

◆断点后的变量保存到全局

选中变量, 右键 Evalute in console
在 console 中选中输出的内容, 右键 store as global variable

事件断点

◆元素上事件断点

devtools 可以查看某一个元素上绑定了哪些事件: Elements > Event Listeners

◆dom mutation 断点(推荐)

dom mutation event 是 DOM3 添加的新的事件, 一般是 dom 结构改变时触发. devtools 可以对 DOMSubtreeModified DOMAttrModified 和 DOMNodeRemoved 时断点.

对上面元素上事件断点(mouseover) 后不容易找到业务代码, 使用 mutation 断点, 断点后配合 call stack 就可以找到业务代码了, 如下图：

这种情况使用全局搜索(ctrl + shift + f) 代码中 css classname 也能找到业务代码, 然后直接断点也可以.

◆全局事件断点

devtools 还可以对事件发生时断点, 比如 click 发生时断点, 这个跟元素上事件断点不同, 不会限定在元素上, 只要是事件发生, 并且有 handler 就断点; 还可以对 resize, ajax, setTimeout/setInterval 断点.

下面这个图是 resize 时中断,因为库都代理了,还需要在断点处一步一步跟下去才能走到业务代码中.

几个常用的断点快捷键

F8: 继续执行

F10: step over, 单步执行, 不进入函数

F11: step into, 单步执行, 进入函数

shift + F11: step out, 跳出函数

ctrl + o: 打开文件

ctrl + shit + o: 跳到函数定义位置

ctrl + shift + f: 所有脚本中搜索

五、Console

元素选择

◆ $(selector)

即使当前页面没有加载jQuery，你也依然可以使用$和$$函数来选取元素，实际上，这两个函数只是对document.querySelector()和document.querySelectorAll()的简单封装，$用于选取单个元素，$$则用于选取多个：

◆ $_

使用 $_来引用最近的一个表达式:

◆ $0 - $4

除了$_，你还可以使用$0,$1,$2,$3,$4这5个变量来引用最近选取过的5个DOM元素。$0 为Elements HTML 面板中选中的元素。 $1 为上一次在 HTML 面板中选中的元素。 $2、$3、$4 同样的。不过只能到$4

◆ copy

复制到剪切板，copy之后，直接ctrl+v:

信息输出

在js代码中打点console.log() 类似debugger

使用chrome浏览器调试时的搜索技巧

听语音

|
浏览：2645
|
更新：2017-11-17 05:22
|
标签：浏览器 JAVASCRIPT

分步阅读

chrome浏览器具有速度快，兼容性好，稳定，功能强大等优点，现在是市场占有率最高的浏览器。对于程序员来说，它的调试功能特别方便，如果你是一个程序员，不仅仅应该掌握chrome浏览器调试界面的基本使用，还应该学会一些进阶的技巧，在特定的场合能够起到事半功倍的效果。下面介绍一些chrome浏览器的使用技巧。

搜索

搜索元素中的字符串

在浏览器控制台，选中Elements标签，用鼠标随便点击一个元素,然后按ctrl+f可以搜索html的内容
搜索样式

样式的方块中，点击Styles或Computed标签，在Filter输入框中输入一个样式，可以从当前页面所使用到的样式中进行筛选。
搜索控制台输出内容

用鼠标点一下控制台输出窗口，然后按ctrl+f可以搜索console或者报错的内容。还可以设置是否忽略大小写或者是否使用正则表达式。
搜索页面各种文本资源中的字符串

在Sources->Sources中，随便选择一个文件，然后双击打开，可以在右边使用ctrl+f搜索文本。

记得先点击"{}"符号整理格式以增加可读性。
全局搜索字符串

在控制台任何地方按ctrl+shift+f,可以搜索本页用到的所有文本资源中的字符串
按文件名搜索

在控制台各处，按ctrl+o或者ctrl+p,可以呼出一个文件列表窗口，输入关键词，可以搜索到文件名包含这个词的文件
搜索网络连接

在Network标签下可以查看和搜索网络连接，大部分按文件名搜索到的文件在这个页面也能搜索到。

但不是所有的网络连接都是文件，比如xhr请求，ws连接就不是文件。
　在Web开发者中，Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能，使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能，如使用console和debugger在线编辑CSS。在这篇文章中，将分享15个有助于改进你的开发流程的技巧。

　　一、快速切换文件

　　如果你使用过sublime text，那么你可能不习惯没有Go to anything这个功能的覆盖。你会很高兴听到chrome开发者功能也有这个功能，当DevTools被打开的时候，按Ctrl+P（cmd+p on mac）,就能快速搜寻和打开你项目的文件。

　　二、在源代码中搜索

　　如果你希望在源代码中搜索要怎么办呢？在页面已经加载的文件中搜寻一个特定的字符串，快捷键是Ctrl + Shift + F (Cmd + Opt + F)，这种搜寻方式还支持正则表达式哦

　　三、快速跳转到指定行

　　在Sources标签中打开一个文件之后，在Windows和Linux中，按Ctrl + G，(or Cmd + L for Mac)，然后输入行号，DevTools就会允许你跳转到文件中的任意一行。

　　另外一种方式是按Ctrl + O，输入:和行数，而不用去寻找一个文件。

　　四、在控制台选择元素

　　DevTools控制台支持一些变量和函数来选择DOM元素：
- $()–document.querySelector()的简写，返回第一个和css选择器匹配的元素。例如$(‘div’)返回这个页面中第一个div元素
- $$()–document.querySelectorAll()的简写，返回一个和css选择器匹配的元素数组。
- $0-$4–依次返回五个最近你在元素面板选择过的DOM元素的历史记录，$0是最新的记录，以此类推。
　　想要了解更多控制台命令，戳这里：Command Line API

　　五、使用多个插入符进行选择

　　当编辑一个文件的时候，你可以按住Ctrl（cmd for mac），在你要编辑的地方点击鼠标，可以设置多个插入符，这样可以一次在多个地方编辑。

　　六、保存记录

　　勾选在Console标签下的保存记录选项，你可以使DevTools的console继续保存记录而不会在每个页面加载之后清除记录。当你想要研究在页面还没加载完之前出现的bug时，这会是一个很方便的方法。

　　七、优质打印

　　Chrome’s Developer Tools有内建的美化代码，可以返回一段最小化且格式易读的代码。Pretty Print的按钮在Sources标签的左下角。

　　八、设备模式

　　对于开发移动友好页面，DevTools包含了一个非常强大的模式，这个谷歌视频介绍了其主要特点，如调整屏幕大小、触摸仿真和模拟糟糕的网络连接

　　（ps:原文中这个视频文件丢失了，这个图是小编补充，你可以自己去测试这个工具，很有用）

　　九、设备传感仿真

　　设备模式的另一个很酷的功能是模拟移动设备的传感器，例如触摸屏幕和加速计。你甚至可以恶搞你的地理位置。这个功能位于元素标签的底部，点击“show drawer”按钮，就可看见Emulation标签 --> Sensors.

　　十、颜色选择器

　　当在样式编辑中选择了一个颜色属性时，你可以点击颜色预览，就会弹出一个颜色选择器。当选择器开启时，如果你停留在页面，鼠标指针会变成一个放大镜，让你去选择像素精度的颜色。

　　十一、强制改变元素状态

　　DevTools有一个可以模拟CSS状态的功能，例如元素的hover和focus,可以很容易的改变元素样式。在CSS编辑器中可以利用这个功能

　　十二、可视化的DOM阴影

　　Web浏览器在构建如文本框、按钮和输入框一类元素时，其它基本元素的视图是隐藏的。不过，你可以在Settings -> General 中切换成Show user agent shadow DOM，这样就会在元素标签页中显示被隐藏的代码。甚至还能单独设计他们的样式，这给你了很大的控制权。

　　十三、选择下一个匹配项

　　当在Sources标签下编辑文件时，按下Ctrl + D (Cmd + D) ，当前选中的单词的下一个匹配也会被选中，有利于你同时对它们进行编辑。

　　十四、改变颜色格式

　　在颜色预览功能使用快捷键Shift + Click，可以在rgba、hsl和hexadecimal来回切换颜色的格式

　　十五、通过workspaces来编辑本地文件

Workspaces是Chrome DevTools的一个强大功能，这使DevTools变成了一个真正的IDE。Workspaces会将Sources选项卡中的文件和本地项目中的文件进行匹配，所以你可以直接编辑和保存，而不必复制/粘贴外部改变的文件到编辑器。

　　为了配置Workspaces，只需打开Sources选项，然后右击左边面板的任何一个地方，选择Add Folder To Worskpace，或者只是把你的整个工程文件夹拖放入Developer Tool。现在，无论在哪一个文件夹，被选中的文件夹，包括其子目录和所有文件都可以被编辑。为了让Workspaces更高效，你可以将页面中用到的文件映射到相应的文件夹，允许在线编辑和简单的保存。

这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首先就会打开Sources进行js断点调试，而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已，在没有js断点功能，只能在IE（万恶的IE）中靠alert弹出窗口调试js代码的时代（特别alert一个object根本不会理你），那样的开发环境对于前端程序员来说简直是一场噩梦。本篇文章讲会介绍Sources的具体用法，帮助各位在开发过程中够愉快地调试js代码，而不是因它而发疯。首先打开F12开发工具切换到Sources面板中:

相关链接	版本说明	下载地址
谷歌浏览器2015	正式版	查看
谷歌浏览器翻译插件	官方安装版	查看
谷歌浏览器控件	工行网银控件	查看
谷歌浏览器64位版	官方版	查看
谷歌浏览器mac版	官方正式版	查看
谷歌浏览器正式版	在线安装	查看
谷歌浏览器测试版	官方版	查看
谷歌浏览器快捷工具	工具控件	查看
谷歌浏览器转手机	安卓版	查看
谷歌浏览器网页截图	插件	查看
谷歌浏览器保存密码获取	中文版	查看
谷歌浏览器缓存路径	修改工具	查看
谷歌浏览器更新器	绿色版	查看
谷歌浏览器华为网盘控件	官方安装版	查看

Sources功能面板是资源面板，他主要分为四个部分，四个部分并不是独立的，他们互相关联，互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。

谷歌浏览器2015最新版下载：http://www.cr173.com/soft/2349.html

首先我们来看区域1，它的功能有些类似于Resources面板，主要是显示网页加载的脚本文件：例如css， js等资源文件（它不包含cookie，img等静态资源文件）。

区域1的导航条上有三个tab切换选项，他们都存有不同域名和环境下的js和css文件，我们首先来说明Sources（资源）选项的作用:

Sources: 包含该项目的静态资源文件。双击选中文件，该文件内容会在区域2中显示，如果你选中的是js文件，那么你可以在区域2种单击行号进行断点调试，只要js执行到了你所标记的这一行，它会停止向下执行并且等待你的命令:

从上图可以看到js执行到断点处时各个区域的变化，首先是区域3中的Breakpoints记录信息会变高亮，然后是区域4中Scope 选项中列出了断点处私有和公有的变量信息，这样，我可以很直观地知道，此时此刻js的执行状态。同样的，你可以把鼠标放到区域2种的某个变量上，浏览器会弹出一个小框框，框框里面则是你悬浮其上的变量所有信息:

　　然后，你可以按F10跟着js执行的路径一步一步地走下去，如果你遇到了一个函数包含着另外一个函数，那么你可以按F11进入到个函数中去观察它的代码执行活动。你也可以通过点击区域1底部的各个图标对js代码进行跟踪。不过我建议你使用快捷键，故名思义，因为它比较快捷方便。不过怎么用完全按照个人习惯来吧。下图是各个按钮的作用功能。

在上图蓝色圆圈中数字，它们分别代表:

1、停止断点调试

2、不跳入函数中去，继续执行下一行代码（F10）

3、跳入函数中去（F11）

4、从执行的函数中跳出

5、禁用所有的断点，不做任何调试

6、程序运行时遇到异常时是否中断的开关

接下来在区域4种切换到Watch Expressions 选项，它的作用是为目前断点添加表达式，使得每次断点往下走一步都会执行你写下的js代码。需要注意的是这个功能必须谨慎使用，因为这可能会导致你写下的监控代码段会不断地被执行。

为了避免你的调试代码重复执行，我们可以在调试时直接在console控制台上一次性地输出当前断点处的信息（推荐这样做）。为了验证我们在console面板中拥有的是当前断点环境，我门可以对比断点执行前后的this值变化。

如果你觉得在断点的时候为了看一个变量必须借用console面板输出的方式来查看会比较麻烦，那么你可以更新最新版的Chrome，它已经为我们解决了这个烦恼。为了方便开发者调试，在这一点上谷歌已经做到了极致，就在前几天更新过Chrome以后，卤煮意外地发现了断点时监控环境变量的另外一种方式，这种方式极为清晰，在断点调试的时候，区域2中会自动显示每个变量的值，每次代码往下走的时候这个值都回时时更新。这让开发者对当前环境变量几乎可以说是一目了然。（此功能有一个小缺陷，那就是无法查看数组或者对象的具体索引和值，不过我相信google会改进它的。）

当你的项目已经线上，出现了一个bug，你修复了之后无法看到它真正在线上的效果，那么你可以在打开线上的项目，直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的，这种方法也能帮你省去频繁验证发布的麻烦，毕竟身为前端码农的你也一定会听到过后台（通常情况下是后台发布）大哥的抱怨：“XXX，测试通过了没，不要出现了哈，发布一次很麻烦的！”。而在Chrome里面，只需要在区域2种直接修改，你就可以验证你的代码在线上是否可行。卤煮在此处只是指出该功能的用法之一。其他的就凭诸位的聪明才智去想了。

即使在断点时，你也可以编辑代码，按ctrl+S保存之后，你会看到区域2的背景由白色变为浅色，而断点会重新开始执行。

回到区域1，Content script 选项开里面包含着一些第三方插件或者浏览器自身的js代码,经常它是被忽略的，实际上它的作用很少。我们可以更多关注一下Snippets选项。还记得基础篇里面介绍的style吗？在里面我们可以编辑界面的css代码并且即时看到它们的映射效果，同样地，在Sinppets中，我们也可以编辑（重写）js代码片段。这些片段实际上就相当于你的js文件一样，不同的是本地的js文件在编辑器里面编辑的，而此处，你是在浏览器中编写的。这些代码片段在浏览器刷新的时候既不会消失，也不会执行，除非是你手动执行它。它可以存在你的本地浏览器中，即使关闭浏览器，再次打开时它依然还在那里。它的主要作用可以使得我们编写一些项目的测试代码时提供便捷，你知道，如果你在编辑器上编写这些代码，在发布时你必须为它们添加注释符号或者手动删除它们，而在浏览器上编写就不需要这样繁琐了。

在Snippets选项的空白处右键后选择弹出的new选项，建立一个你自己的新的文件，然后在区域2种编辑它。

Snippets 的非常功能强大，它的许多隐藏功能还有待发掘。目前卤煮使用它是在记住调试片段、单元测试、少量的功能代码编写功能上。

最后我们看看js中时间丰富的监控功能，同上篇文章介绍的一样，Sources面板和Elements面板一样有监控事件的功能，而且Sources中功能更加丰富，也更加强大。它的这部分功能集中在区域3中。我以下图为例，观察其作用。

从上到下，紫色圈内的数字的意义：

1、断点处的债堆栈，就是从该函数起，逐级追寻调用到他的函数名。例如:

function a () { b(); } function b() { c(); } function c() { //在该处断点，查看call stack } a->b->c. call stack 从上到下的顺序就是 c b a

2、在区域2中你的断点调试信息。当某个断点在执行的时候对应的信息会高亮，双击该处信息可以在区域2中快速定位。

3、添加的Dom监控信息。

4、击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求，输入内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。

5、为网页添加各种类型的断点信息。如选中了Mouse中的某一项（click），当你在网页上出发这个动作（单击网页任意地方），你浏览器就是立刻断点监控该事件。

值得再次重复一遍，Sources是一般的功能开发中最常用到也是最有用的功能面板，它里面的许多功能对于我们开发前端工程来说是非常有帮助的。在web2.0时代的今天，我不推荐依然在自己的代码里面写调试信息的行为，因为这会然你的开发变得繁琐。Chrome开发工具给我们提供的强大功能，我们应该好好利用之。这篇文章就到此结束，虽然有点繁琐，但总算基本表述了卤煮使用经验和想法，希望对你有帮助。如果你觉得不错，请推荐一下本文并继续关注卤煮在的博客。在下一篇中我将向大家介绍Chrome开发工具中的性能方面的调试。

Chrome 实用调试技巧

如今Chrome浏览器无疑是最受前端青睐的工具，原因除了界面简洁、大量的应用插件，良好的代码规范支持、强大的V8解释器之外，还因为Chrome开发者工具提供了大量的便捷功能，方便我们前端调试代码，我们在日常开发中是越来越离不开Chrome，是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆。

介绍Chrome调试技巧的文章很多，本文结合我自己的开发经验，希望从实际运用的角度为大家再一次谈一谈这些功能，也希望对大家都有所帮助和启发。

更好的阅读体验>>

常用快捷键

ctrl+p 项目中定位文件，以下查找VueJS库文件：

ctrl+shif+o 文件中定位成员函数，以下定位到VueJS的nextTick接口：

Snippets 随时编写代码

Chrome在souces页面提供snippets一栏，这里我们可以随时编写JS代码，运行结果会打印到控制台。代码是全局保存的，我们在任何页面，包括新建标签页，都可以查看或运行这些代码。

我们不再需要为了运行一小段JS代码而新建一个HTML页面。snippets的方便之处在于，你只需要打开chrome就可以编写一份任意页面都可以运行的JS代码，而且用过snippets都知道，snippets编辑器是可以和sublime text相媲美的。

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

class="help-page_row">
    class="help-page_title">title
 class="help-page_desc">paragraph
 class="help-page_desc">paragraph

手工将100多页的内容组合成上面的HTML结构太过耗费时间，不太现实，所以我决定使用JS来将文档内容的标题和段落解析出来，并进行HTML包装。

由于不需要视图的支持，在snippets编写这段代码是最好的选择，经过几次调试修改，最终成果如下：

最后，将Word文档内容复制到snippets中，执行解析函数，最终的解析出来的HTML结果打印到控制台：

snippets中可以使用控制台的copy接口，解析结果直接拷贝到剪切板会更方便

使用snippets来完成这类轻量级工作时，不需要追求代码的可读性、可维护性，我们的代码只需要在大部分场景下能够正常运行就足够了。

但为了满足大部分场景，代码也是需要反复调试修改。snippets最实用之处恰恰在于，随时编写，随时调试，随时修改！

copy 格式化拷贝

在项目开发中，我们可能需要将后台数据拷贝到本地，作为本地数据进行调试。

如果后台返回没有格式化的JSON数据，在本地调试中我们难免会遇到手动修改数据的情况，格式不美观的JSON数据修改起来会异常困难。

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

JSON.stringify({name: 'lxjwlt'}, null, 4);

每次格式化JSON数据都要编写这段代码实在太麻烦，我们可以使用chrome控制台的copy接口解决这一问题：

请求项的右键菜单中选择Copy Response拷贝响应内容
命令行中使用copy接口处理数据
得到格式化的JSON数据

不仅仅是对象，copy接口对任何数据都可以进行拷贝，这里利用的是copy在拷贝数组或对象过程中，对数据进行美化的功能

iframe 调试

如果我们使用Webpack服务器工具webpack-dev-server访问项目的开发页面，我们会发现，开发页面被内嵌到了iframe中进行渲染。

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

// html
<iframe id="iframe"></iframe> // 控制台 with (document.getElementById('iframe').contentWindow) { inspect(document.body); new Vue({ /* ... */ }); // do something... }

以上方法可以在任意浏览器上使用，但如果我们使用的是Chrome浏览器，Chrome控制台的上下文切换功能会更加方便：

我们将上下文切换到iframe中，控制台的代码都会基于iframe的上下文来执行。如果你用webpack-dev-server进行调试，你会感谢这个功能。

debug 毫无用处？

Chrome控制台提供debug接口，可以传入一个函数，当这个函数下次执行的时候，调试器会自动在该函数中进行断点调试。

我们明明可以在代码中设置断点进行调试，为什么要用到debug来设置，是为了舍弃鼠标用命令行装逼而已吗？

在我看来，debug函数还提供了定位功能，它能够让我们很快的找到指定的函数。下面演示怎么调试VueJS的数据驱动，如何找到VueJS数据驱动的代码入口。

我们都知道，VueJS的数据驱动是通过defineProperty方法对数据的getter和setter进行封装，在这个封装中实现数据变化驱动视图同步修改的功能。如果我们想研究VueJS的数据驱动，那么首先要找到封装getter和setter的地方，我们可以通过debug接口来进行定位。以下用getter方法举例。

首先我们知道VueJS实例中的数据都是映射_data属性中的值：

var vm = new Vue({ data: { name: 'lxjwlt' } }); vm.name === vm._data.name; // true

所以我们要找的数据实际在VueJS实例的_data属性中。接下来我们通过getOwnPropertyDescriptor获取数据的getter函数：

Object.getOwnPropertyDescriptor(vm._data, "name").get;

找到了getter函数，我们就可以使用debug接口对其进行断点调试：


debug(Object.getOwnPropertyDescriptor(vm._data, "name").get)

这样，当我们获取vm.name数据时，自然会触发该数据的getter函数，从而触发断点调试，自动定位到了函数所在的地方：

日后要调试或者定位公共API，不妨试试Chrome的debug接口功能！

条件breakpoint

在Chrome中，我们可以给断点设置表达式，当表达式为true时断点调试才会生效，这就是条件断点。

有了条件断点，我们在调试代码的时候能够更加精确的控制代码断点的时机，特别是一段代码会被反复运行的时候，条件断点能够跳过大多数情况，只关注我们想要的情景。除了这一点外，条件断点调试还有另一个用法。

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

比如我们要在断点发生后查看DOM元素，那么断点条件可以这么写：

// 当DOM元素满足某个条件进行断点，同时查看这个元素
elem.hasAttribute('class') && inspect(elem);

如果不清楚操作的返回值，我们可以强行让该操作返回true，从而不影响断点的条件判断：

elem.hasAttribute('class') && (inspect(elem) || true);

或者分行写：

if (elem.hasAttribute('class')) {inspect(elem); true;}

再比如，在VueJS的调试中，我们往往需要知道VueJS实例的当前状态，所以每次触发断点调试时，我们可以先使用clear接口清除控制台历史输出，再将VueJS实例的当前状态打印出来：

vm.sum > 4 && (clear() || vm.$log() || true);

如果在条件断点中定义变量，变量是定义到全局作用域上，即window对象上的

Async调试

Chrome调试器的Async模式是为调试异步函数所设计一个功能。

在Promise被广泛应用的今天，我们都知道，Promise的回调是异步执行的，没有开启Async模式前，调动栈只记录到回调函数本身，我们无法找到代码执行的顺序，这给我们调试带来巨大的困难。Async模式可以解决这个问题：

开启Async模式后，异步函数之前的调用栈都会被记录下来，而且调用栈中代码执行状态也得到了保留。

谷歌浏览器调试大全

前端chrome浏览器调试总结

引言

一.先来认识一下这些按钮的功能

二.Sources资源页面的断点调试

三.Post man你值得拥有的网络请求神器

完结

一、Elements

二、DOM

修改 html & 属性

查看元素上绑定了哪些事件

三、Styles

修改样式