Chrome开发者工具详解(1)-Elements、Console、Sources面板
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,列出了各种类型的事件,勾选你要监听的事件,
在指定的事件执行时,断点就会有触发。
个人博客
Chrome开发者工具详解(1)-Elements、Console、Sources面板的更多相关文章
- 【转】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):Elements、Console、Sources面板
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...
- Chrome开发者工具详解(1)
Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...
- Chrome开发者工具详解(2)
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...
随机推荐
- 依赖注入的威力,.NET Core的魅力:解决MVC视图中的中文被html编码的问题
有园友在博问中提了这样一个问题 —— .NET Core 中文等非英文文字html编码输出问题,到我们的 ASP.NET Core 项目中一看,也是同样的问题. 比如下面的Razor视图代码: @{ ...
- [.net 面向对象编程基础] (22) 事件
[.net 面向对象编程基础] (22) 事件 事件(Event)是学习.net面向对象编程很重要的一部分,在学习事件之前,我们实际上已经在很多地方使用了事件,比如控件的click事件等,这些都是. ...
- GitHub初体验(小菜新手github用起来)
记得自己刚认识github的时候觉得他好高端,只知道好多牛人托管代码在上面,但是还觉得离我好遥远.其实不然,用起来,哇塞,真强大. 如果你现在像我当时一样茫然,那希望我的分享能帮助到你.(记录自己用起 ...
- 相识Highcharts,几分钟玩转Highcharts
Highcharts是一个功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 官网:http://www.hcharts.cn/ 我觉得对于刚接触一个东西的新手来说,有时候对一个东西真 ...
- 在cocos2dx和unity3d之间选择
人生最纠结的事,莫过于有选择………… cocos2dx和unity3d从某种意义上讲,都很不错.但当面对特定需求以及团队情况的时候,总是能分出高下的. 假设,目标游戏是一款类似 刀塔传奇 的游戏 我们 ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(十三):地图相关接口说明
为了方便大家开发LBS应用,SDK对常用计算公式,以及百度和谷歌的地图接口做了封装. 常用计算: 用于计算2个坐标点之间的直线距离:Senparc.Weixin.MP.Helpers.Distance ...
- redis常用命令、常见错误、配置技巧等分享
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/117.html?1455860236 1. redis查看当前所有的key ...
- html5 浏览器端数据库
为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage — 本地存储 可 ...
- iOS苹果企业证书被撤销以及启用与管理
在国内, 积分墙以及各大助手(爱思助手, 91苹果助手, XY苹果助手, PP助手, 快用助手)等业务领域都在使用,苹果对证书的使用越来越严格.简单的分析一下,证书被封的原因. 一般证书被封会收到 ...
- windows phone Datepicker Timepicker
选择程序包管理器控制台 在PM后输入Install-Package WPtoolkit可自动下载 PM> Install-Package WPtoolkit 在xaml中添加引用 xmlns:t ...