关于Chrome Devtools你可能有所不知的几个技巧
Cool Chrome DevTools tips and tricks you wish you knew already
在Elements面板中拖拽元素
在Elements面板
移动HTML元素,和UE沟通时快速预览效果。之前我只知道可以删除元素?。
在Console面板中获取当前选中的元素
首先在Elements面板
选中一个元素,然后在Console面板
中输入$0
回车。如果你的前端项目有使用jQuery,还可以使用$($0)
进一步使用jQuery的API函数。
在Console面板中操作上次表达式的结果
在Console的执行上下文中,使用$_
获取上次表达式结果,并可以做进一步操作使用。
给元素添加样式、改变元素的状态?
在Elements面板
面板中还有3个特别有用的按钮。?
+
号按钮创建新的样式组合空间,同时我们也可以修改选择器。翻译的不好大家看图体会。
:hov
使你可以手动更改元素状态,hover
、active
、focus
等等
:cls
快捷的给选中节点添加class
截屏
整个浏览器截屏&某个元素截屏
在Elements面板
中选择一个元素然后输入快捷键cmd-shift-p (or ctrl-shift-p in Windows)
输入shot然后有三个选项。如下图:
使用CSS选择器进行元素选择
打开Elements面板
,输入快捷键cmd-f (ctrl-f in Windows)
,调出搜索框。
XHR/Fetch调试
不推荐用,更喜欢在代码中添加debugger;短语
。 需在Source面板
中进行操作,如下图:
对元素节点打断点
选中元素节点、右键、Break-on
下有三个选项,根据需求进行选择,分别为属性变更
、子元素更改
、元素移除
时触发断点。
大家有啥好用的技巧欢迎补充?
【开发环境推荐】Cloud Studio 是基于浏览器的集成式开发环境,支持绝大部分编程语言,包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等,无需下载安装程序,一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境,并且支持自定义域名指向,动态计算资源调整,可以完成各种应用的开发编译与部署。
关于Chrome Devtools你可能有所不知的几个技巧相关推荐
- 前端神器—Google Chrome Devtools细节详解
本人是一位没出实习期的前端小菜鸟一枚,这几个月发现了Google Chrome Devtools的易用性非常高的小功能和小细节 特意分享给大家.欢迎大家收藏+点赞.新人需要鼓励哈哈 内容和图片均为原创 ...
- Chrome DevTools 之 Network,网络加载分析利器
虽然一直在用Chrome DevTools,但大多停留在常用的功能和调试上,比如Elements/Network/Sources/Console等主要功能,而对于性能分析/优化相关的Timeline/ ...
- Chrome DevTools:在 Profile 性能分析中显示原生 javascript 函数
本文翻译自 Chrome DevTools: Show native functions in JS Profile,中文版首发在我的知乎专栏 V8 源码及周边. 在 Chrome DevTools ...
- Chrome DevTools进阶教程
https://developer.chrome.com/devtools Chrome DevTools进阶教程 转载于:https://www.cnblogs.com/daishuguang/p/ ...
- 你不知道的 Chrome DevTools 玩法
大家好,我是若川.今天再分享一篇 chrome devtools 的文章.之前分享过多篇. Chrome DevTools 全攻略!助力高效开发 前端容易忽略的 debugger 调试技巧 笔者 ...
- Chrome DevTools 调研笔记
1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2 Elements 2.1 功能 检查和实时更新页面的HTML与C ...
- Node.js 应用故障排查手册 —— 正确打开 Chrome devtools
楔子 前面的预备章节中我们大致了解了如何在服务器上的 Node.js 应用出现问题时,从常规的错误日志.系统/进程指标以及兜底的核心转储这些角度来排查问题.这样就引出了下一个问题:我们知道进程的 CP ...
- 实现Chrome Devtools调试JavaScript V8引擎
摘要: 最近开发小程序JavaScript的运行时,通过在客户端嵌入JavaScript V8引擎来实现.前端同学需要调试JavaScript代码,正好Chrome浏览器的Devtools是与V8的I ...
- 你不知道的 20+ Chrome Devtools 技巧!
你不知道的 20+ Chrome Devtools 技巧! 谷歌Chrome是目前开发者使用的最流行的网络浏览器之一.根据StatCounter的统计,截至2019年9月,谷歌Chrome浏览器在全球 ...
最新文章
- 敏捷宣言遵循的十二条原则
- ANT 发布项目中 build.xml 文件的详细配置
- 通达oa与mysql集成_安装通达OA后想使用其自带的Mysql数据库的解决方法
- 脚本自动实现DNS服务各区域配置文件
- render与render_to_response的区别
- sqlserver获取当前时间_c#获取并显示当前日期时间
- vue.js表格赋值_vue.js input框之间赋值方法
- Enterprise Solution 解决方案与源代码下载
- 算法高级(13)-常见负载均衡算法Java代码实现
- [Ext JS 4] 实战之 ComboBox 和 DateField (消失之解决办法)
- Redis系列(七)--Sentinel哨兵模式
- 比特币算法——SHA256算法介绍
- Android透明字体画法
- Android 客户端性能优化(魅族资深工程师毫无保留奉献)
- 从黑格尔的正反合理论看人生的三个阶段
- 使用 git add -p 整理 patch
- 电商后台设计:权限设计
- 【华为HCIE证书难考吗?】
- 吉林大学珠海学院计算机录取分数线,吉林大学珠海学院录取分数线2021是多少分(附历年录取分数线)...
- RHEL8【基础篇】 更改hostname