Chrome Devtools 你可能有所不知的几个小技巧

摘要:Chrome Devtools 你可能有所不知的几个小技巧,包含拖拽元素、Console 获取当前选中的元素、操作上次表达式的结果、给元素添加样式、改变元素状态、截屏、使用 CSS 选择器进行元素选择、XHR/Fetch 调试、对元素节点打断点及屏幕取色器等。

Elements 面板中拖拽元素

Elements(元素)面板移动 HTML 元素,和 UE 沟通时快速预览效果。

Chrome Devtools 你可能有所不知的几个小技巧

Console 面板中获取当前选中的元素

首先在 Elements(元素)面板选中一个元素,然后在 Console(控制台)面板中输入 $0 回车。如果你的前端项目有使用 jQuery,还可以使用 $($0) 进一步使用 jQuery 的 API 函数。

Chrome Devtools 你可能有所不知的几个小技巧

Console 面板中操作上次表达式的结果

在 Console(控制台)的执行上下文中,使用 $_ 获取上次表达式结果,并可以做进一步操作使用。

Chrome Devtools 你可能有所不知的几个小技巧

给元素添加样式、改变元素状态

在 Elements(元素)面板中还有 3 个特别有用的按钮。

  • + 号按钮创建新的样式组合空间,同时我们也可以修改选择器。
  • Chrome Devtools 你可能有所不知的几个小技巧

  • :hov 使你可以手动更改元素状态,hover、active、focus 等等。
  • Chrome Devtools 你可能有所不知的几个小技巧

  • :cls 快捷的给选中节点添加 class。
  • Chrome Devtools 你可能有所不知的几个小技巧

截屏

在 Elements(元素)面板中选择一个元素,组合按键 Ctrl + Shift + P 打开“命令”菜单,然后输入 shot 然后有 4 个选项。如下图:

Chrome Devtools 你可能有所不知的几个小技巧

  • Capture area screenshot:捕获区域截图,点击后手动选择区域截取。
  • Capture full size screenshot:捕获全尺寸屏幕截图,以鸟瞰图的方式截取全部内容。
  • Capture node screenshot:捕获节点截图,对在 Elements 面板选中的元素节点进行截取。
  • Capture screenshot:捕获屏幕截图,截取当前的屏幕区域。

使用 CSS 选择器进行元素选择

打开 Elements(元素)面板,使用快捷键 Ctrl + F,调出搜索框。

Chrome Devtools 你可能有所不知的几个小技巧

XHR/Fetch 调试

不推荐用,更喜欢在代码中添加 debugger 短语,需在 Source(来源)面板中进行操作,如下图:

Chrome Devtools 你可能有所不知的几个小技巧

对元素节点打断点

选中元素节点、右键、Break-on 下有三个选项,根据需求进行选择,分别为属性变更、子元素更改、元素移除时触发断点。

Chrome Devtools 你可能有所不知的几个小技巧

版权声明:本文为博主原创文章,未经博主允许不得转载。http://www.dedenotes.com/html/devtools-skill.html
(1)
打赏 微信扫一扫 微信 支付宝 QQ 扫码打赏

防止表单重复提交的 4 种方法

Dedenotes 赞(3)

平时开发的项目中可能会出现下面这些情况:由于用户误操作,多次点击表单提交按钮;由于网速等原因造成页面卡顿,用户重复刷新提交页面;黑客或恶意用户使用 Postman 等工具重复恶意提交表单(攻击网站)。

meta

Dedenotes 赞(3)

meta 是 html 语言 head 区的一个辅助性标签,位于文档的头部,不包含任何内容,标签的属性定义了与文档相关联的名称/值对。meta 标签可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

HTTP消息结构 HTTP请求报文和响应报文的格式

Dedenotes 赞(3)

HTTP 协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,基于 TCP/IP 通信协议来传递数据(HTML 文件, 图片文件, 查询结果等),所有的 WWW(World Wide Web)文件都必须遵守这个标准。