Chrome调试工具developer tool技巧
Chrome这个浏览器赞的不能再赞了,给前端的开发调试工作带来了极大的效率提升。
Chrome的简洁、快速吸引了无数人,它的启动速度、页面解析速度都很快,同时得益于Google V8的快速,Javascript执行速度也飞快。而且它对HTML5和CSS3的支持也完善,html类的富客户端应用Chrome上无论是流畅性还是呈现的效果,都是比较出色的,这对于开发者,特别是对于那些喜欢研究前沿技术的前端开发者来说,是很重要的。
样式调试
普通元素:右键选择审查元素即可查看当前dom元素的样式
伪类样式调试:伪类样式一般不显示出来,比如像调试元素hover的样式怎么办,看图勾选即可
查看元素盒模型:盒模型对于表现的分析还是挺重要的,而且能看position的各个参数(如果设置了的话)
颜色表示转换:用颜色的名称;以十六进制数;以RGB整数设置颜色;以RGB百分数设置颜色。Shift+click即可切换另一格式。或者直接设置使用哪一种格式(点击右上角齿轮状的图标)。
命令断点调试
使用“debugger;”语句在代码中加入强制断点。
需要断点条件吗?只需将它包装它在IF子句中:
1
2
3
|
if (somethingHappens) {
debugger;
}
|
只需记住在上线前移除,另外debugger在IE下会报错。
JS代码格式化
js 文件在上线前一般都会进行压缩, 压缩的 javascript 为一行式几乎没有可读性, 几乎无法设定断点. 在 Sources 面板下面(先在Elements打开某个js)有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了。一秒钟由一行变成人类可读的多行式代码,再也不用粘贴到sublime再Jsformt调整格式了。
Chrome 32 的开发者工具支持 CSS 格式化功能 :http://t.cn/zRUVHXc
查看元素绑定的事件
在 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 panel 下)
- 更多快捷键: 在 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 到这里就算找出来了,但是如果这个 Bug 是在事件回调函数或者 XHR 回调函数上,就得结合 DOM 事件断点和 XHR 断点 进一步往上找哪个函数出错。另外,如果是发给服务器请求没有得到正确的 response,可以通过 Network 面板查看请求的参数、Cookie、HTTP 头是否有误。
另外,还可以通过 Charles/Nginx/Fiddler 等工具将远程 js 代码映射到自己的电脑上,免去了代码格式化的麻烦,还可以直接编辑。
关于性能
Profiles
可以记录JS函数和CSS选择器对CPU的占用,以及内存占用时间线。用来找出影响性能的瓶颈非常有帮助。
Timeline
可以记录浏览器渲染的每一帧里发生了什么,从js执行,css reflow到画面repaint,各自占用多少时间。可以帮助你定位是什么导致动态效果的帧数不流畅。
关于Chrome版本
chrome canary (开发板,最新): https://www.google.com/intl/zh-CN/chrome/browser/canary.html
chrome(稳定版,常用):http://www.google.cn/intl/zh-CN/chrome/
其他功能
开发者工具中调试修改js或者css同时自动保存文件
http://isux.tencent.com/chrome-workspace.html
Chrome插件开发中文文档
http://open.chrome.360.cn/extension_dev/overview.html
参考链接
Chrome调试工具developer tool技巧的更多相关文章
- Chrome调试工具Developer Tools——前端必备神器
本文链接:https://blog.csdn.net/u012542647/article/details/79401485 今天要给大家介绍一个神器,就是谷歌浏览器(Chorme)自带的前端调试工具 ...
- Chrome developer tool:本人钟爱的 console、Network 功能简谈
在最开始时,本人调试查看网页,一直用的是 firefox 的 firebug 插件,并没有使用 chrome 的 developer tool .只不过,在日常生活使用过程中,一直使用的是 chrom ...
- chrome developer tool 调试技巧2
我大概是从 08.09 年从 Firebug 转入 Chrome Developer Tool,一直用到现在,越用越喜欢.我平时调错时常用的功能有: 代码格式化可以将被压缩的代码自动展开 实时代码编辑 ...
- chrome developer tool 调试技巧
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. ...
- [转]chrome developer tool 调试技巧
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. ...
- chrome developer tool—— 断点调试篇
断点,调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析.也可以在一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时 ...
- 转载|chrome developer tool—— 断点调试篇
断点,调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析.也可以在一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时 ...
- 浏览器开发者工具Chrome Developer Tool
开发者工具Chrome Developer Tool https://developers.google.com/chrome-developer-tools/docs/profiles 一直被墙 ...
- chrome 浏览器的使用技巧
前端工程师大部分的工作成果都需要在浏览器中查看,使用 chrome 浏览器的频率非常高.更好更优雅地使用 chrome,将 chrome 配置成一款趁手的浏览器,将极大地提升编程效率.本文将详细介绍 ...
随机推荐
- Windows 7安装Oracle 10g的方法
Windows7下安装Oracle 10g提示"程序异常终止,发生未知错误"的解决方法 1.修改Oracle 10G\database\stage\prereq\db\refhos ...
- Vue-cli 记录
出自http://www.cnblogs.com/nutritious/p/6494479.html 先给出能正确安装的步骤: 1.进盘符 2,为啥不用npm,这是国外的东西,有些电脑无法FQ,会导致 ...
- head first python helloword
如何使用python 打出hello word 在python shell 键入print 'hello word'( python 2) or print ("hello word&qu ...
- android网页分享到朋友圈问题求助?
目前想要实现通过QQ将网页分享到微信好友或朋友圈,看见有些APP是直接分享出去左下角图标显示的是QQ.求助各位大牛提供下思路. 这种功能是怎么实现的.应该不是通过android的系统分享实现的吧?.查 ...
- sql嵌套批量更新
嵌套批量更新 UPDATE CheLiang SET lineName = t.linename FROM TeamJiHua t ,CheLiang tc WHERE t.id = tc.teami ...
- jq和js插件的各个文件夹里放置的内容
1. demo文件夹,存放各种实例. 2. dist文件夹,全称是distribution.在某些框架中,因为开发和发布的内容或者代码形式是不一样的(比如利用Grunt压缩等等),这时候就需要一个存放 ...
- 使用Scribefire在博客中插入语法高亮
效果如下, 文字1 int cool void main() { cout<<"hello world!"<<endl } 文字2 经过一番折腾,终于搞定了 ...
- htm5拖放和画布
拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 首先,为了使元素可拖动,把 draggable 属性设置为 true ondr ...
- Android studio出现Error:Unable to tunnel through proxy. Proxy returns "HTTP/1.1 400 Bad Reques的解决办法
最近更新了一下Android Studio,在导入新项目之后出现Error:Unable to tunnel through proxy. Proxy returns "HTTP/1.1 4 ...
- 将HTML导出生成word文档
前言: 项目开发中遇到了需要将HTML页面的内容导出为一个word文档,所以有了这边随笔. 当然,项目开发又时间有点紧迫,第一时间想到的是用插件,所以百度了下.下面就介绍两个导出word文档的方法. ...