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

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月1日18:16:50 评论 470

Cool Chrome DevTools tips and tricks you wish you knew already

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

在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使你可以手动更改元素状态,hoveractivefocus等等

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

:cls快捷的给选中节点添加class

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

截屏

整个浏览器截屏&某个元素截屏
Elements面板中选择一个元素然后输入快捷键cmd-shift-p (or ctrl-shift-p in Windows)输入shot然后有三个选项。如下图:

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

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

打开Elements面板,输入快捷键cmd-f (ctrl-f in Windows),调出搜索框。

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

XHR/Fetch调试

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

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

对元素节点打断点

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

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

大家有啥好用的技巧欢迎补充?

【开发环境推荐】Cloud Studio 是基于浏览器的集成式开发环境,支持绝大部分编程语言,包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等,无需下载安装程序,一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境,并且支持自定义域名指向,动态计算资源调整,可以完成各种应用的开发编译与部署。

im, 无色
  • 本文由 发表于 2019年7月1日18:16:50
C# 开发Chrome内核浏览器(WebKit.net) Chrome开发

C# 开发Chrome内核浏览器(WebKit.net)

WebKit.net是对WebKit的.Net封装,使用它.net程序可以非常方便的集成和使用webkit作为加载网页的容器。这里介绍一下怎么用它来显示一个网页这样的一个最简单的功能。 第一步: 下载...
Google Chrome中的高性能网络 (三) Chrome开发

Google Chrome中的高性能网络 (三)

使用预连接优化了TCP连接管理   已经预解析到了主机名,也有了由OmniBox和Chrome Predictor提供信号,预示着用户未来的操作。为什么再进一步连接到目标主机,在用户真正发起...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: