我们使用Chrome DevTools

  1. 快速编辑HTML元素
  2. 展开所有子元素
  3. 检查员搬迁
  4. DOM元素搜索
  5. 调色板
  6. 多个游标
  7. 编码base64图像
  8. 伪类切换
  9. 列选择
  10. 复制cURL请求
  11. 屏幕键盘
  12. 整个页面的屏幕截图
  13. 触摸设备的仿真
  14. 有用的功能

顾名思义,Chrome DevTools或Web检查器是专为Web开发人员和与之相关的人员设计的工具。 Web检查器允许您执行以下操作:

  • 检查显示器的正确性。
  • 跟踪JavaScript中脚本的执行情况。
  • 查看网络活动。

写这篇文章的时候我用过 加纳利 - 测试新功能的Chrome版本,然后归入Chrome的稳定版本。

要启动检查器,您可以右键单击页面上的任意位置并选择“查看项目代码”,也可以按Ctrl + Shift + C.

快速编辑HTML元素

让我们从最简单的:编辑元素开始。

让我们从最简单的:编辑元素开始。

如何检查:

  • 选择“元素”选项卡。
  • 选择面板中的任何HTML元素。
  • 双击标签并更改标签名称。

编辑完成后,结束标记将自动更新。

展开所有子元素

如何检查:

  • 转到“元素”面板。
  • 选择一个元素,并在按住Alt的同时单击元素左侧的箭头。

检查员搬迁

可以将检查器面板同时按到浏览器窗口的底部和右侧。 例如,在宽屏显示器上工作时,右侧面板的位置很方便。 此外,检查员面板可以放置在单独的窗口中,例如,转移到另一个监视器。

可以将检查器面板同时按到浏览器窗口的底部和右侧。 例如,在宽屏显示器上工作时,右侧面板的位置很方便。 此外,检查员面板可以放置在单独的窗口中,例如,转移到另一个监视器。

如何检查:

  • Ctrl + Shift + D - 切换位置

DOM元素搜索

对于这将是一个发现可能并不多,但在“元素”选项卡中,您可以通过DOM进行搜索。

对于这将是一个发现可能并不多,但在“元素”选项卡中,您可以通过DOM进行搜索。

如何检查:

  • 按Ctrl + F并输入建议的搜索查询。

调色板

从调色板中选择颜色

最新版Chrome中的颜色选择经历了一些变化:添加了两个调色板以方便颜色选择。

多个游标

移动光标,在按住Ctrl的同时,单击所需区域以添加光标。 您可以使用Ctrl + U撤消操作。就个人而言,我从未有用过。

编码base64图像

如何检查:

  • 切换到“网络”面板。
  • 选择图像
  • 右键单击图像并选择“”

伪类切换

伪类反映了元素的状态及其相对位置。

伪类反映了元素的状态及其相对位置。

如何检查:

  • 右键单击“元素”面板中的元素,然后在“强制元素状态”列表中选择一个伪类。
  • 您还可以在“元素”面板的右侧选择伪类。

列选择

如何检查:

  • 转到“来源”面板。
  • 选择任何文件。
  • 按住Alt键选择文本。

在“元素”面板中编辑HTML时,选择列也有效。

复制cURL请求

可以复制“网络”选项卡中的任何请求,然后将其粘贴到终端中,以便使用curl执行。

屏幕键盘

如果选择了Nexus 5X配置文件,您可以看到屏幕键盘处于活动状态时网站的外观。

Chrome DevTools:屏幕键盘 Chrome DevTools:屏幕键盘

整个页面的屏幕截图

拍摄整个页面的图片非常简单。 只需要......

  1. 打开Inspector。
  2. 转到控制台。
  3. 按Ctrl + Shift + P.
  4. 输入“截图”
  5. 选择“捕捉全尺寸截图”
整个页面的屏幕截图

触摸设备的仿真

您还可以模拟一些传感器:

  • 触摸屏
  • 地理定位的坐标
  • 加速度计

怎么试试:

  • 选择“元素”面板。
  • 按“Esc”并选择“Emulation> Sensors”。

有用的功能

键和值

键和值函数允许您分别将对象的键或值输出到控制台。 键和值函数允许您分别将对象的键或值输出到控制台。  分别显示键和对象值 分别显示键和对象值