一、Elements

chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css.

windows: ctrl + shift + i

mac: cmd + opt + i

二、DOM

修改 html & 属性

节点右键, 如下图:

可以：

• 添加属性(enter)

• 修改 html(F2)

• 删除元素(delete)

除了右键, 还可以:

• h toggle 元素的 visibility 属性

• 拖拽节点, 调整顺序

• 拖拽节点到编辑器（如下图）

• ctrl + z 撤销修改

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

• 默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件,因为在在冒泡或捕获阶段会经过该节点

• Selected Node Only 只会列出当前节点上绑定的事件

• 每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture（如下图）

———handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler

———isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的

———useCapture 是 addEventListener 的第三个参数, 说明事件是以 冒泡 还是 捕获 顺序执行

三、Styles

修改样式

• 添加规则

• 添加、修改属性 同样可以通过 ctrl + z 取消

四、断点

代码断点

◆设置断点

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

 

搜索

 

1.  

   搜索元素中的字符串

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

   
2.  

   搜索样式

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

   

   
3.  

   搜索控制台输出内容

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

   
4.  

   搜索页面各种文本资源中的字符串

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

   记得先点击”{}”符号整理格式以增加可读性。

   
5.  

   全局搜索字符串

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

   
6.  

   按文件名搜索

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

   
7.  

   搜索网络连接

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

   但不是所有的网络连接都是文件，比如xhr请求，ws连接就不是文件。

   

8.  

   　在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面板中:

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开发工具中的性能方面的调试。

<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>

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

// html
<iframe id="iframe"></iframe>

// 控制台
with (document.getElementById(\'iframe\').contentWindow) {
    inspect(document.body);

    new Vue({ /* ... */ });

    // do something...
}

var vm = new Vue({
    data: {
        name: \'lxjwlt\'
    }
});

vm.name === vm._data.name; // true

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

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

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

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

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

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