Chrome开发者工具详解(四)之Elements、Console、Sources面板
Elements面板
实时编辑DOM节点和CSS样式 双击DOM树视图里面的节点,可以实时编辑标签属性,修改的效果会立刻反应在浏览器里
点击右侧Style面板,可以实时修改CSS的属性值,这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式,如下图 :
查看网页的本地修改历史,点击Styles面板中修改过属性的文件名,会跳转到Source面板在文件位置右击选择Local modifications,可以查看本地的所有修改记录,点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容
- 控制台输出日志,通过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相匹配的所有元素的数组
设置断点
断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发
① DOM元素节点发生改变时
在Elements面板中指定的DOM节点上右击,在弹出的菜单中选择Break on...可以看到三个选择项,比如我们选择Subtree modifications,那么当选择的节点里面的子节点被添加、删除、修改,则断点就会被触发。设置方式如下图:
下图是在我的系统里添加指定省市指定医院时由于增加了元素节点而触发的断点,通过单步调试可以看到会弹出一个div对话框供用户添加数据。
② XHR生命周期状态改变时
当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时,则断点就会有触发。
③ 指定的事件执行时
在Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件,勾选你要监听的事件, 在指定的事件执行时,断点就会有触发。
Chrome开发者工具详解(四)之Elements、Console、Sources面板的更多相关文章
- Chrome开发者工具详解(1):Elements、Console、Sources面板
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...
- Chrome开发者工具详解(五)之Network面板
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...
- Chrome开发者工具详解(1)-Elements、Console、Sources面板
Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...
- Chrome开发者工具详解(4)-Profiles面板
Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...
- Chrome开发者工具详解(2)-Network面板
Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...
- 【转】Chrome开发者工具详解
https://www.jianshu.com/p/7c8552f08e7a Chrome开发者工具详解(1)-Elements.Console.Sources面 Chrome开发者工具详解(2)-N ...
- 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这些 ...
随机推荐
- JPA学习(四、JPA_映射关联关系)
框架学习之JPA(四) JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中 ...
- TTTTTTTTTTTTT LA 2191 树状数组 稍修改
题意:给出n个数字,操作有修改(S)和输出区间和(M). #include <iostream> #include <cstdio> #include <cstring& ...
- 一个超详细vue无限滚动vue-infinite-scroll插件的配置及使用详解
开发中总会遇到这种下拉加载的设计方案,Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现.接下来我们一起看下它的配置及使用方式. 首先我们先了解下他的配置参数: v-in ...
- java实现微信小程序服务端(登录)
微信小程序如今被广泛使用,微信小程序按照微信官网的定义来说就是: 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 这就是微信小程序的魅力所在,有 ...
- 两类特殊的Nim游戏:Nim-K游戏与反Nim游戏
Nim-K游戏 描述 有\(n\)堆石子,每次可从\(k\)堆石子中拿走任意数量的石子. 两个人轮流拿,谁不能拿谁输. 先手必胜条件 把\(n\)堆石子的石子数用二进制表示,统计每一个二进制位上\(1 ...
- android UI设计及开发
一.viewPager实现左右滑动及导引功能 1,如果每个屏幕只是一个简单的布局,如果简单的话,定义一个arraryIist<View>,利用addview将所有的布局加载, 然后为vie ...
- 运行Spark官方提供的例子
去spark官网把spark下载下来: https://spark.apache.org/downloads.html 解压,可以看下目录: 其中examples目录下提供了java,scala,py ...
- js运行原理
https://www.youtube.com/watch?v=8aGhZQkoFbQ
- 神经网络学习笔记一——Neural Network
参考自http://deeplearning.stanford.edu/wiki/index.php/Neural_Networks 神经元模型 h(x)= f(W'x)f(z)一般会用sigmoid ...
- Windows程序调用dll
可以写在WndProc的WM_CREATE里面,不能写在WinMain里面