谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer
2019独角兽企业重金招聘Python工程师标准>>>
Google Chrome在招来了FireFox,FireBug的项目组领导人John J. Barton后,Chrome Dev Tools也变的越来越好用,越来越方便了。本文根据Google I/O上对Chrome Dev Tools的介绍(http://www.youtube.com/watch?v=N8SS-rUEZPg),和相关PPT:http://chrome-devtools-io2011.appspot.com/template/index.html 整理而来。(参照的Chrome版本为: 19.0.1084.52)
实时CSS Style编辑
选择一个Dom,可以对Dom进行编辑和操作,实时修改Css Style, 同时CssStyle可以保存变更历史版本。
保存变更历史版本:
同时支持可以在Chrome 载入的Css文件正文中自由的修改。
网络交互
当一个页面载入时,所有发出的请求可以在“Network”里监听到,同时下面有”All”, “Documents”, ”Stylesheets”, “Images”, “Scripts”, “XHR”(XMLHttpRequst), WebSockets, Other, 这几个分类,可以清晰的把网络请求进行分类,同时可以看到每个请求的详细情况。
控制台
在控制台里可以方便的使用命令来查看Dom,执行JavaScript, 等等操作, Console API: http://getfirebug.com/wiki/index.php/Command_Line_API copy(), dir(), inspect(), $0,
Script Debugging
Script Debugging 脚本调试功能,这个功能可以说是Chrome Dev Tools里最实用最强大的工具了:
1. JavaScript Breakpoints, Break on exception, JavaScript Pretty Print.
Break Points:断点在需要设置的地方点一下即可,Break on exception:当此功能开启时,有Script异常出现时,自动会在Exception处断住,方便差错。JavaScript Pretty Print: 当JavaScript被压缩后,非常难阅读,Pretty Print使JavaScript按照语法和关键字重新换行并重排,使得压缩后的JavaScript仍然可以进行阅读。
2. DOM Breakpoints
Dom元素断点,经常有多处JavaScript操作同一个Dom元素,如果要在JavaScript上下断点,要下好几个地方,不好断到想要的地方,在Dom元素上下断点就方便多了:
Break on subtree modifications, Break on attributes modifications, Break on node removal, 可以方便的断到操作Dom的JavaScript。
3. XHR Breakpoints, Event listener breakpoints:
XHR Breakpoints,可以方便的断到XMLHttpRequest Ajax请求。Event Listener Breakpoints, 可以方便的断到各种Event。
4. 查找JavaScript
使用Ctrl+Shift+F, 打开查找窗口, 查找支持正则表达式:
查找函数定义:Ctrl + Shift + o
查找文件: Ctrl + o
5. 实时修改 JavaScript代码
页面外链JavaScript文件在 Script Panel中可以直接修改,改完后Ctrl + s 保存, 会立即生效,但是不支持 Html 页面中 JavaScript 修改,经过 Pretty print 格式化的JavaScript也不支持实时修改。
6. 自建Script文件
在Console(控制台) 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在Script Panel中加入一个新的外链Script文件: filename.js, 这个新文件和其它外链JavaScript 文件一样,可以实时进行修改。
Timeline
Timeline功能把浏览器处理Dom的时间轴画了出来,方便进行优化:
Remote Debugging
Remote Debugging 使得Chrome成为一个WebServer,执行命令--remote-debugging-port=1337, 同时再开一个Chrome 访问localhost:1337, 就可以用一个Chrome当Host,一个Chrome当Client,在调试一些移动Web的时候非常实用。
转载于:https://my.oschina.net/powertoolsteam/blog/278284
谷歌 Chrome Dev Tools 浅析 – 成为更高效的 Developer相关推荐
- 前端性能优化必备技能 - 利用 Chrome Dev Tools 进行页面性能分析
背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
- 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
- Debug a Server–Side Rendered SAP Spartacus Storefront Using Chrome Dev Tools
In SAP Spartacus document there is a page for "How to Debug a Server–Side Rendered Storefront&q ...
- 使用Chrome Dev Tools, deb.js调试Javascript小技巧
本文讲介绍一些基于 Chrome Dev Tools 的实用的客户端Javascript 调试小技巧.我将重点关注那些无从下手,不知道该在哪儿添加断点的情景. 首先看下本文主题: 找出哪段代码正在修改 ...
- 前端性能分析 Chrome Dev Tools 之 Performance
前端性能分析 Chrome Dev Tools 之 Performance 文章目录 前端性能分析 Chrome Dev Tools 之 Performance 1. 属性字段 2. 常用性能数据指标 ...
- 从dreamweaver转入Chrome Dev Tools 开发html css静态页面
2021年啦,你还在用dreamweaver或者文本编辑器开发网页? You are out! 学习用Chrome Dev Tools 怎么开发,记录一下. 用webstorm打开你开发的html页面 ...
- 图解前端调试工具Chrome Dev Tools的使用
快捷指令速查表 标题 快速打开Dev Tools Ctrl + Shift + i 打开命令菜单 Ctrl + Shift + P 快速打开Dev Tools Ctrl + Shift + i 快速打 ...
- 使用 Chrome Dev tools 分析应用的内存泄漏问题
Catching memory leaks with Chrome DevTools 当分配的内存没有返回给操作系统或内存池时,我们将其称为内存泄漏. 在这种情况下,内存未被任何应用程序使用,并且被不 ...
- python summary结果提取_如何用python取得Chrome Dev Tools Network面板中的Summary数据?
如图所示: Page Loading Time Test中,想用python取得 network中所有资源加载完的时间,特别是Finish的时间数据. 尝试过下面的取得的数据中并没有类似Finish的 ...
最新文章
- Windows中断编程
- 字节跳动2019暑期实习生算法岗笔试题
- Java和Python安装和编译器使用
- 变频器按启动没反应_起重机软启动柜晶闸管损坏维修几大故障
- Good Time 冲刺 六
- Hi3519V101开发环境搭建(一)
- 计蒜客---N的-2进制表示
- maven项目在eclipse中debug
- 上瘾:如何打造习惯养成中的产品(投资篇)
- Linux安装字体库
- 【Godot】Godot 插件制作流程
- 微信小程序 后端接口(thinkphp)
- python中linspace函数_python np.linspace
- 图片放大-jQuery脚本使用异常:仅闪现图片外框
- daytime协议的服务器和客户端程序,用Socket套接字实现DAYTIME协议的服务器和客户端程序-20210726002244.doc-原创力文档...
- c语言定义禁止优化变量,c语言防止优化
- 谈谈我理解的SA——Systems Architecture
- 做PPT浪费时间,那是因为你不知道这四个工具
- Spsice仿真实验 例B-1
- GitHub的高级搜索方式--找到最想要的源码