Chrome开发者工具详解(1)-Elements、Console、Sources面板

时间:2022-12-23 15:06:08

Chrome开发者工具详解(1)-Elements、Console、Sources面板

Chrome开发者工具面板

面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。
Chrome开发者工具详解(1)-Elements、Console、Sources面板
这些按钮的功能点如下:

  • 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树视图里面的节点,可以实时编辑标签属性,修改的效果会立刻反应在浏览器里面

Chrome开发者工具详解(1)-Elements、Console、Sources面板

  • 点击右侧Style面板,可以实时修改CSS的属性值,这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式,如下图:

Chrome开发者工具详解(1)-Elements、Console、Sources面板

  • 点击右侧Computed面板,可以编辑左侧选中的盒子模型参数,所有的值都是可以修改的;点击不同的位置(topbottomleftright) 就可以修改元素的paddingbordermargin属性值。

Chrome开发者工具详解(1)-Elements、Console、Sources面板

  • 查看网页的本地修改历史
  • 点击Styles面板中修改过属性的文件名,会跳转到Source面板
  • 在文件位置右击选择Local modifications,可以查看本地的所有修改记录
  • 点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容

Chrome开发者工具详解(1)-Elements、Console、Sources面板

Console面板

控制台输出日志

通过JS代码或者命令行console.log()console.warn()
console.error()可以将日志信息输出到控制台

  • console.log 显示一般的基本日志信息,当要显示的基本日志太多时可以使用console.group将相关的日志进行分组
  • console.warn 显示带有黄色小图标的警告信息
  • console.error 显示带有红色小图标红色的错误信息

Chrome开发者工具详解(1)-Elements、Console、Sources面板

  • console.assert 当第一个参数为false时,才会显示第一个参数的值

Chrome开发者工具详解(1)-Elements、Console、Sources面板

  • 可以根据JS条件判断输出不同的日志信息

注: 当需要换到下一行而不是回车的时候,请按Shift+Enter
Chrome开发者工具详解(1)-Elements、Console、Sources面板

控制台交互

  • JS表达式计算

在上一小节,我们已经看到可以在控制台输入JS表达式点击Enter即可得到表达式的值,当你在控制台输入命令时,会弹出相应的智能提示框,你可以用Tab自动完成当前的建议项

  • 选择元素

Chrome开发者工具详解(1)-Elements、Console、Sources面板

快捷方式 描述
$() 返回与指定的CSS选择器相匹配的第一个元素,等同于document.querySelector()
$$() 返回与指定的CSS选择器相匹配的所有元素的数组,等同于document.querySelectorAll()
$x() 返回与指定的XPath相匹配的所有元素的数组

Chrome开发者工具详解(1)-Elements、Console、Sources面板

注: 我在实际操作过程中发现$()并没有按预期返回相匹配的第一个元素,而是返回了所有匹配的元素数组,我也给Google提供了这个issue,等待Google的答复。

Sources面板

你可以在这个面板里面调试你的JS代码,也可以在工作区打开你的本地文件。

调试JS代码

  • 你可以点击JS代码块前面的数字外来设置断点,如果当前代码是经过压缩的话,可以点击下方的花括号{}来增强可读性,所有的断点都会列出右侧的断点区。

Chrome开发者工具详解(1)-Elements、Console、Sources面板

  • 设置断点

断点可以在DOM元素节点发生改变时XHR生命周期状态改变时指定的事件执行时被触发

DOM元素节点发生改变时

Elements面板中指定的DOM节点上右击,在弹出的菜单中选择Break on...,可以看到三个选择项,比如我们选择Subtree modifications
那么当选择的节点里面的子节点被添加、删除、修改,则断点就会被触发。设置方式如下图:
Chrome开发者工具详解(1)-Elements、Console、Sources面板

下图是在我的系统里添加指定省市指定医院时由于增加了元素节点而触发的断点,通过单步调试可以看到会弹出一个div对话框供用户添加数据。

Chrome开发者工具详解(1)-Elements、Console、Sources面板

XHR生命周期状态改变时

当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时,则断点就会有触发。

Chrome开发者工具详解(1)-Elements、Console、Sources面板

指定的事件执行时

Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件,勾选你要监听的事件,
在指定的事件执行时,断点就会有触发。

Chrome开发者工具详解(1)-Elements、Console、Sources面板

个人博客

我的个人博客

Chrome开发者工具详解(1)-Elements、Console、Sources面板的更多相关文章

  1. 【转】Chrome开发者工具详解

    https://www.jianshu.com/p/7c8552f08e7a Chrome开发者工具详解(1)-Elements.Console.Sources面 Chrome开发者工具详解(2)-N ...

  2. Chrome开发者工具详解(2)-Network面板

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  3. Chrome开发者工具详解(4)-Profiles面板

    Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...

  4. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

  5. Chrome开发者工具详解(3)-Timeline面板

    Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...

  6. 【Tools】Chrome开发者工具详解

    作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多不胜数,主流的有Chrome,Firefox,Safari,IE,Opera,非主流的如360,遨游,QQ浏览器,搜狗浏览器,据说淘宝 ...

  7. Chrome开发者工具详解(1):Elements、Console、Sources面板

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...

  8. Chrome开发者工具详解(1)

    Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...

  9. Chrome开发者工具详解(2)

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...

随机推荐

  1. 第六届acm省赛总结(退役贴)

    前言: 这是我的退役贴,之前发到了空间里,突然想到也要在博客里发一篇,虽然我很弱,但是要离开了还是有些感触,写出来和大家分享一下,希望不要见笑.回来看看,这里也好久没有更新了,这一年确实有些懈怠,解题 ...

  2. 20145320 《Java程序设计》第七周学习总结

    20145320 <Java程序设计>第七周学习总结 教材学习内容总结 13章 时间与日期 时间的度量: 格林威治标准时间(GMT时间),现已不作为标准时间使用. 世界时(UT),秒的单位 ...

  3. protocolbuffe

    protocolbuffer(以下简称PB)是google 的一种数据交换的格式,它独立于语言,独立于平台.google 提供了多种语言的实现:java.c#.c++.go 和 python,每一种实 ...

  4. 日志框架之Logback

    1 日志框架选择 日志门面:SLF4J 日志实现:Logback 2 实现控制台的日志打印输出01 2.1 在需要实现日志信息打印的类中实例化Logger对象 private final Logger ...

  5. require和require&lowbar;once的区别

    require 的使用方法如 require("./inc.php"); .通常放在 PHP 程式的最前面,PHP 程式在执行前,就会先读入 require 所指定引入的档案,使它 ...

  6. Visual Studio 中使用万能头文件 &num;include &lt&semi;bits&sol;stdc&plus;&plus;&period;h&gt&semi;

    最近开始使用VS,之前用的DEV C++软件可直接使用 #include <bits/stdc++.h>  ,但VS中并没有,为了使用方便,可直接在VS中添加此头文件,方法如下: 1.在安 ...

  7. poj3261

    题解: 同bzoj1717 代码: #include<bits/stdc++.h> using namespace std; ,P2=,P=; int a1[P],num[P],a2[P] ...

  8. Unity项目中的资源管理

    这是我在2017金山技术开放日分享的部分内容.从贴图资源格式配置的介绍开始,引申出资源配置工具,最后再谈谈一整套项目资源管理方案.在GitHub上可以获取到资源配置工具的代码,是基于下面理念的一份简单 ...

  9. 14&period;连接池&period;md

    目录 连接池定义 常用开源连接池: DBCP: C3P0 连接池定义 使用统一的规范:javax.sql.DataSource实现统一编程 常用开源连接池: DBCP:tomcat C3P0:hibe ...

  10. 如何让PictureBox背景色透明

    winform程序中的PictureBox载入了一张带有透明度的PNG图片,悬浮于其他控件之上,但是它的背景不是透明的,即使把它的BackColor设置为Color.Transparent,或者是0x ...