如何更专业的使用Chrome开发者工具 - WEB前端 - 伯乐在线
& 如何更专业的使用Chrome开发者工具
顾名思义Chrome开发工具就是一个工具，它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面，也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具，你可以做很多有趣的事情：
调试界面的问题
使用断点调试JavaScript代码
优化你的代码
打开开发者工具，你只需要在页面的任意位置右击鼠标，选择检查元素或从右上角菜单中选择“工具&更多工具&开发者工具“。
下面示例演示的都是在Google Chrome的浏览器下做的演示。
快速编辑HTML元素
选择”Elements”面板
选择”Elements”面板内的一个DOM元素
双击你需要打开的DOM元素标签，你就可以编辑它
当你完成之后会自动更新和关闭标签
到指定的行数
你可以在“Sources”面板中选择指定的文件中使用“:行数:列数”的功能。试试快捷键CMD + O。
展开所有子节点
选择”Elements”面板
选择DOM元素和在带有剪头的地点按住Alt +点击鼠标左键，可以展开所有子节点
改变开发者工具位置
试一试快捷键：CMD + Shift + D。设置开发者工具有三个选项：
不在窗口中显示开发者工具
在窗口右侧显示开发者工具
在窗口底部显示开发者工具
通过CSS选择器搜索DOM元素
试一试快捷键：CMD + F / CTRL + F和输入你需要的类名或ID名，可以搜索到相应的选择器。
Material和自定义颜色调色板
你可以点击颜色代码前面的小图标，你可以选择：
页面颜色：这个面板是从你的Web网站（在你的CSS中）自动生成
Material Design:这个面板可以从中自动生成颜色
移动光标按住CMD + 点击可以添加多个光标，你也可以使用CMD + U撤销你选择的最后一个光标。
复制图片的Data URI
选择”Network”面板
在“Resources”面板选择你的图片
在图片上右击，选择“Copy Image as Data URI”选项
在左边的面板元素上右击鼠标，并选择“Force Element State”
另外在右边的面板中选择切换伪类状态的图标
通过拖拽选择多列
选择“Sources”面板
在“Sources”面板编辑器中选择你需要的文件
按住Alt并拖动鼠标
使用$0获取当前元素
选择“Elements”面板
在”Element”面板中选择DOM元素
点击”Console”并输入$0可以获取当前元素
在元素中显示
选择一个DOM节点：
在“Console”面板中右击
选择”Reveal in Elements Panel”
查看事件监听器
选择“Elements”面板”
在“Event Listeners”菜单中选择一个事件
右击并选择“Show Function Definition”，你可以查看到对应的源码
预览Easing
点击easing图标（紫色的图标），可以预览easing
你可以通过浏览选择其他的easing或者自定义easing
点击左上角的手机图标，选择设备模式
点击断点(“blue”,”green”,”orange”)工具栏选择断点
如果你可击一个工具栏，你可以在源码中找到它对应的位置。
Network Filmstrip
Film Strip”显示页面从开始到结束渲染的截图。你可以点击截图和在timeline-style中查看视图。
选择“Network”面板
点击“录制”图标
重新加载页面
Copy Response
你可以在网络资源中复制”Response/Request”头。
选择“Network”面板”
在“Sources”面板编辑器中选择你需要的文件”
右击并选择“Copy Response”
运行预定义的代码片段
在左侧边栏中选择: Sources & Snippets
右击选择Select New
输入文件名和在右侧的面板中输入代码片段
代码片段文件名上右击选择Run
Device Emulation Sensors
你可以模拟移动设备传感器：
地理位置坐标
你可以这样操作：
选择“Elements”面板
选择“Emulation & Sensors”和点击“Esc”取消
Workspaces
选择“Sources”面板
在Sources面板中右击并选择“Add Folder to Workspaces”
选择你的文件和右击，并选择Map to Network Resources
修改你的文件代码和查看
可能感兴趣的话题
o 174 回复
o 119 回复
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线Google Chrome浏览器开发人员工具
要开始使用开发人员工具，请先下载Google Chrome&浏览器。在浏览器安装完成后，您可以打开自己感兴趣的网页或网络应用程序，然后通过下面任何一种方式进入开发人员工具：
点击位于浏览器用户界面右上角的&页面&下拉菜单，然后选择&开发人员&&&开发人员工具&。
右键点击网页上的任一元素，在弹出菜单中选择&审查元素&。
在&Windows操作系统上，使用Ctrl+Shift+I快捷键打开开发人员工具（或使用Ctrl+Shift+J直接进入&JavaScript&控制台）。
现在您应该已经看到开发人员工具的窗口了吧？在窗口的最上方的工具栏里排列着&8&个图标，分别对应不同的功能，每一个图标点击后都会打开相应的调试面板，帮助您获取各种不同的信息，如&DOM&树、资源占用情况、页面相关的脚本等。通过&Ctrl+[&和&Ctrl+]&键，可以在这些项之间进行切换。工具栏最右方还提供了一个搜索框，方便在当前面板中进行搜索。
& & & &工具窗口下部的按钮可以让调试窗口停靠到主窗口内，切换&JavaScript&控制台状态，以及其它一些功能。当然您也可以使用&Esc&键来更快地切换&JavaScript&控制台状态。直接点击控制台图标会使控制台调试界面会占据了整个开发工具窗口。窗口右下角显示的是错误和警告计数，点击它们也会打开控制台。
&&&&&&&接下来的单元，让我们一起来一起分解这些图标所对应面板具有的强大功能吧！
1.&&&&元素（Elements）面板
在元素（Elements）面板中，可以看到整个页面的&DOM&树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。我们这里以Google&简体中文首页为例，鼠标右键单击& Google&搜索&&按钮，选择&审查元素&，您会看到如下的窗口界面（注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，可通过点击窗口左下方的&停靠&&图标将其变为内嵌模式）：&!--[endif]--&
在工具窗口右侧，显示的是被选元素的样式信息，如有兴趣，可以尝试通过双击现有属性来修改该元素的style&属性或应用的某个选择器中的属性值，也可以通过取消勾选的方式去掉一些属性，同时观察页面的实时变化。那怎样给现有的元素或者选择器增加一个属性值呢？不用着急，鼠标双击您所想修改的元素的element.style部分或者它应用的选择器的空白部分（如下图所示），即可添加属性。需要注意的是，添加任何属性都必须以分号结束。
&&&&&&&拖动工具窗口最右侧的滚动条，在展开的&Styles&模块下方还有&Metrics、Properties、Event Listeners&几大模块。Metrics&模块以图形方式展示出左侧面板中选中元素的盒模型并标出了各部分的详细数值，在调试页面布局问题时，这样的展示方式往往更直观、更清晰。
&&&&&&&向上拖动工具窗口中部的滚动条，找到&图片&元素，点击后，可看到在页面上相应的元素被选中，这时我们将工具窗口右侧的滚动条拖到最下方，展开&Event Listeners&中个各项，可看到这个链接（元素）的相关事件监函数。通过&Event Listeners&项右侧的&齿轮&图标，您可以选择是只显示选中节点上的注册的事件，还是显示整个事件流中所有注册的事件。
点击工具窗口左下角的放大镜图标可进入&审查模式&，选中后，放大镜变为蓝色，这时随鼠标在主窗口的页面中的移动，你会看到相应的元素被高亮标识出来，点击后，工具窗口会显示选中元素的&DOM&节点信息。另外值得注意的一点是，在&Google Chrome&浏览器开发人员工具里，所有脚本和样式表是按语法着色的，调试起来更加清晰。Chrome调试工具developer tool技巧 - 轩枫阁 – 前端开发 | web前端技术博客
/ Chrome调试工具developer tool技巧
阅读：8252
作者：ivan
分类：、、
Chrome这个浏览器赞的不能再赞了，给前端的开发调试工作带来了极大的效率提升。
Chrome的简洁、快速吸引了无数人，它的启动速度、页面解析速度都很快，同时得益于Google V8的快速，Javascript执行速度也飞快。而且它对HTML5和CSS3的支持也完善，html类的富客户端应用Chrome上无论是流畅性还是呈现的效果，都是比较出色的，这对于开发者，特别是对于那些喜欢研究前沿技术的前端开发者来说，是很重要的。
普通元素：右键选择审查元素即可查看当前dom元素的样式
伪类样式调试：伪类样式一般不显示出来，比如像调试元素hover的样式怎么办，看图勾选即可
查看元素盒模型：盒模型对于表现的分析还是挺重要的，而且能看position的各个参数（如果设置了的话）
颜色表示转换：用颜色的名称;以十六进制数;以RGB整数设置颜色;以RGB百分数设置颜色。Shift+click即可切换另一格式。或者直接设置使用哪一种格式（点击右上角齿轮状的图标）。
命令断点调试
使用“”语句在代码中加入强制断点。
需要断点条件吗？只需将它包装它在IF子句中：
if (somethingHappens) {&&&&debugger;}
只需记住在上线前移除，另外debugger在IE下会报错。
JS代码格式化
js 文件在上线前一般都会进行压缩, 压缩的 javascript 为一行式几乎没有可读性, 几乎无法设定断点. 在 Sources 面板下面（先在Elements打开某个js）有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了。一秒钟由一行变成人类可读的多行式代码，再也不用粘贴到sublime再Jsformt调整格式了。
Chrome 32 的开发者工具支持 CSS 格式化功能 ：
查看元素绑定的事件
在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners（被隐藏时点击箭头可展开） 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件。
在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件。
Ajax 时中断
在 Scripts 面板右侧有个 XHR Breakpoints, 点右侧的 + 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求。
页面事件中断
除了给设定常规断点外, 还可以在某一特定事件发生时中断(不针对元素) , 在 Scripts 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件。
Javascript 异常时中断
Pretty print 左侧的按钮是开启 js 抛异常时中断的开关, 有两种模式：在所有异常处中断, 在未捕获的异常处中断. 在异常处中断后就可以查看为什么抛出异常了
所有 js 文件中搜索&查找 js 函数定义
在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用
查找函数定义: ctrl + shift + 0 (在 Source panel 下)
查找文件: ctrl + o (在 Source
更多快捷键: 在 chrome developer tool 中点击右下角设置图标，选择shortcuts
command line api
$(id_selector) 这个与页面是否有 jQuery 无关
$$(css_selector)
$0, $1, $2, $3, $4
Elements 面板中最近选中的 5 个元素, 最后选择的是 $0
这个 5 个变量时先进先出的
copy(str) 复制 str 到剪切板, 在断点时复制变量时有用
monitorEvents(object[, types])/unmonitorEvents(object[, types])
当 object 上 types 事件发生时在 console 中输出 event 对象
更多 console api 请 console.log(console) 或
更多 command line api
实时修改 js 代码生效
页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效，一般用这个实时的在代码里插 console.log
经测试不支持 html 页面中 js 修改
经过 Pretty print 格式化的脚本不支持修改
console 中执行的代码可断点
在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了，又可以断点调试了（如果没发现，可以再调试面板中CTRL+O，输入文件名即可）。
调用栈分析
这个非常常用，Sources 面板下右上角的那一部分，可以试试查看变量的内容，结合断点调试最佳。方法是在source面板中，选择某个变量，右键选择“Add to watch”。（点击JS代码的左侧行数可添加和删除断点）
分析 HTTP 请求
Network 面板下列出了所有的 HTTP 请求，可以很方便的查看请求内容、HTTP 头、请求时间等信息。常用于分析ajax请求等
以线上代码出 Bug 为例。一般上手第一步是使用代码格式化功能将被压缩的线上代码展开，然后开启自动异常断点，尝试重现 Bug。当 Bug 出现时代码会自动断到出错的那一行。然后通过调用栈分析结合控制台找到最开始出错的那个函数上。一般的 Bug 到这里就算找出来了，但是如果这个 Bug 是在事件回调函数或者 XHR 回调函数上，就得结合 DOM 事件断点和 XHR 断点 进一步往上找哪个函数出错。另外，如果是发给服务器请求没有得到正确的 response，可以通过 Network 面板查看请求的参数、Cookie、HTTP 头是否有误。
另外，还可以通过 Charles/Nginx/Fiddler 等工具将远程 js 代码映射到自己的电脑上，免去了代码格式化的麻烦，还可以直接编辑。
可以记录JS函数和CSS选择器对CPU的占用，以及内存占用时间线。用来找出影响性能的瓶颈非常有帮助。
可以记录浏览器渲染的每一帧里发生了什么，从js执行，css reflow到画面repaint，各自占用多少时间。可以帮助你定位是什么导致动态效果的帧数不流畅。
关于Chrome版本
chrome canary （开发板，最新）：
chrome（稳定版，常用）：
开发者工具中调试修改js或者css同时自动保存文件
Chrome插件开发中文文档
纸飞机许愿
前端路上，一路有你。编辑你的正能量，快乐工作，努力生活~
请选择弹奏的曲谱
点击开始录制，可以录制弹奏的曲子
分享钢琴节奏：