Chrome开发者工具详解(1):Elements、Console、Sources面板
Chrome开发者工具面板
面板上包含了Elements面板、Console面板、Sources面板、Network面板、 Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。
这些按钮的功能点如下:
Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。
Sources:断点调试JS。
Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。
Timeline:记录并分析在网站的生命周期内所发生的各类事件,以此可以提高网页的运行时间的性能。
Profiles:如果你需要Timeline所能提供的更多信息时,可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
Application:记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。
Security:判断当前网页是否安全。
Audits:对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。注: 这一篇主要讲解前三个面板Elements、Console、Sources。
Elements面板
实时编辑DOM节点和CSS样式
双击DOM树视图里面的节点,可以实时编辑标签属性,修改的效果会立刻反应在浏览器里面
点击右侧Style面板,可以实时修改CSS的属性值,这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式,如下图:
点击右侧Computed面板,可以编辑左侧选中的盒子模型参数,所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin属性值。
查看网页的本地修改历史
点击Styles面板中修改过属性的文件名,会跳转到Source面板
在文件位置右击选择Local modifications,可以查看本地的所有修改记录
点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容
Console面板
控制台输出日志
通过JS代码或者命令行console.log()
、console.warn()
和console.error()
可以将日志信息输出到控制台
console.log
显示一般的基本日志信息,当要显示的基本日志太多时可以使用console.group
将相关的日志进行分组console.warn
显示带有黄色小图标的警告信息console.error
显示带有红色小图标的红色的错误信息
console.assert
当第一个参数为false时,才会显示第一个参数的值
可以根据JS条件判断输出不同的日志信息注: 当需要换到下一行而不是回车的时候,请按
Shift
+Enter
。
控制台交互
JS表达式计算
在上一小节,我们已经看到可以在控制台输入JS表达式点击Enter
即可得到表达式的值,当你在控制台输入命令时,会弹出相应的智能提示框,你可以用Tab
自动完成当前的建议项
选择元素
快捷方式 | 描述 |
---|---|
$() | 返回与指定的CSS选择器相匹配的第一个元素,等同于document.querySelector() |
$$() | 返回与指定的CSS选择器相匹配的所有元素的数组,等同于document.querySelectorAll() |
$x() | 返回与指定的XPath相匹配的所有元素的数组 |
注: 我在实际操作过程中发现$()
并没有按预期返回相匹配的第一个元素,而是返回了所有匹配的元素数组,我也给Google提供了这个issue,等待Google的答复。
Sources面板
你可以在这个面板里面调试你的JS代码,也可以在工作区打开你的本地文件。
调试JS代码
你可以点击JS代码块前面的数字外来设置断点,如果当前代码是经过压缩的话,可以点击下方的花括号
{}
来增强可读性,所有的断点都会列出右侧的断点区。
设置断点
断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发
① DOM元素节点发生改变时
在Elements面板中指定的DOM节点上右击,在弹出的菜单中选择Break on...
,可以看到三个选择项,比如我们选择Subtree modifications
, 那么当选择的节点里面的子节点被添加、删除、修改,则断点就会被触发。设置方式如下图:
下图是在我的系统里添加指定省市指定医院时由于增加了元素节点而触发的断点,通过单步调试可以看到会弹出一个div
对话框供用户添加数据。
② XHR生命周期状态改变时
当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时,则断点就会有触发。
③ 指定的事件执行时
在Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件,勾选你要监听的事件, 在指定的事件执行时,断点就会有触发。
作者:伯乐在线专栏作者 - CharlieChu
链接:http://web.jobbole.com/89079/
Chrome开发者工具详解(1):Elements、Console、Sources面板的更多相关文章
- Chrome开发者工具详解(1)-Elements、Console、Sources面板
Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...
- 【转】Chrome开发者工具详解
https://www.jianshu.com/p/7c8552f08e7a Chrome开发者工具详解(1)-Elements.Console.Sources面 Chrome开发者工具详解(2)-N ...
- Chrome开发者工具详解(2)-Network面板
Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...
- Chrome开发者工具详解(4)-Profiles面板
Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...
- Chrome开发者工具详解(5)-Application、Security、Audits面板
Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...
- Chrome开发者工具详解(3)-Timeline面板
Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...
- 【Tools】Chrome开发者工具详解
作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多不胜数,主流的有Chrome,Firefox,Safari,IE,Opera,非主流的如360,遨游,QQ浏览器,搜狗浏览器,据说淘宝 ...
- Chrome开发者工具详解(1)
Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...
- Chrome开发者工具详解(2)
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...
随机推荐
- c# 取得扩展名
string KZM=files[0].FileName.Substring(files[0].FileName.LastIndexOf(".") + 1);
- oracle服务的开始和关闭 CMD
开始: @echo halt oracle service ...net start OracleServiceORCLnet start OracleOraDb11g_home1TNSListene ...
- web并发访问的问题
一般的webapplication,可能会遇到这样的问题,你可以这样模拟:用浏览器开一个窗口,选中一条记录,编辑之,但是先不要保存,新开一个浏览器窗口,找到这条记录,删除之,然后再回到第一个窗口点击保 ...
- hdu 1009 贪心基础题
B - 贪心 基础 Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:32768KB 64bi ...
- QT5-控件-QComboBox
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QComboBox> cl ...
- python进行base64编解码
[转] 直接上代码 import base64 fin = open(r"D:\2.zip", "rb") fout = open(r"D:\2.x. ...
- web多语言的一种处理方式
在开发一种国际化系统时,多语言是必须的. 总的来说处理方式有两种,一种是后端处理,另一种是前端处理.呵呵,有点废话~~ 后端处理没用过,猜猜是在标记需要处理语言的地方进行替换. 前端处理是要先把语言文 ...
- HDU 5417 Victor and Machine
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5417 Problem Description Victor has a machine. When t ...
- iOS 断网处理
iOS 断网处理 (2014-01-13 18:13:21) 转载▼ 标签: it - (BOOL)application:(UIApplication *)application didFini ...
- VLSI和ASIC的区别(转)
VLSI和ASIC是不同的两个概念 VLSI(Very Large Scale Integrate circuit)是指集成电路的规模,有时也指制造集成电路所使用的工艺,VLSI工艺一般都在1um以下 ...