chrome developer tools小技巧
chrome developer tools小技巧
最喜欢用的浏览器是chrome浏览器,没有之一。不仅仅因为简洁、轻巧、速度快,更是因为其内置的强大的F12 developer tools开发者工具。
技巧1:Elements面板
1)这个是最基本的,如果想查看页面的元素,直接点击鼠标右键,inspect elements(审查元素),chrome就会自动呼出developer tools面板中的第一个标签Elements,同时会定位到所选择的DOM元素节点(如图1),这样我们就可以点击右键编辑DOM节点的内容。
2)除了Elements面板左侧匹配的DOM节点,右侧的Style面板也很有用,其中element.style表示DOM元素的行内(inline)样式,现在不推荐使用行内样式,提倡写到CSS中,所以大部分情况是空的;下面的Matched CSS Rules是写在CSS文件中的并且匹配当前DOM节点元素的CSS样式,用删除线划掉的是和当前元素相关但是被后来的样式覆盖的;再往下灰色背景的区域不是我们自己写的样式,而是浏览器自带的,叫做user agent stylesheet;
3)有一点需要注意:鼠标的active、hover等属性是默认看不到的,需要点击Toggle Element Style显示或隐藏。
4)Metrics
用来查看块元素的结构。如margin和padding的区别等。
技巧2:Source面板
1)Local modifications
最惊艳的一个技巧是修改了本地文件,developer tools会自动进行版本控制,方便查看和比较我们做过的修改。
2)debugger
单步执行、跨函数执行,step into这些功能都有。
3)Pretty print
代码格式化功能,把压缩成1行的js和css文件格式化,更美观,易于调试。
技巧3:强大的console控制台
1)接受firebug的命令行API
http://getfirebug.com/wiki/index.php/Command_Line_API
如常用的$0,表示当前选中的元素。
2)使用console记录日志
console.log()
console.warn()
console.info()
console.error()
技巧4:resource面板
包含了与当前页面相关的几乎所有资源,包括document、js、css、image等,还包括比较新潮的html5的local strage等。
技巧5:network面板
1)记录了所有http request
2)还可以查看每个request的报文头和内容等。
完。
chrome developer tools小技巧相关推荐
- Chrome 开发工具 (Chrome Developer Tools):Network Panel说明
出处:http://www.cnblogs.com/starof/p/5443445.html 官方资料:Chrome Developer Tools: Network Panel 一.chrome ...
- 【翻译】Chrome Developer Tools: Element 样式
说明:本文对Chrome Developer Tools系列翻译文章的一篇 原文见https://developers.google.com/chrome-developer-tools/docs/e ...
- Python|http|Chrome Developer Tools|Postman|HTTPie|builtwith库|python-whois库|爬虫及解析|语言基础50课:学习(10)
文章目录 系列目录 原项目地址 第31课:网络数据采集概述 爬虫的应用领域 爬虫合法性探讨 Robots协议 超文本传输协议(HTTP) 相关工具(Chrome Developer Tools.Pos ...
- 前端(移动端)开发利器Chrome Developer Tools秘籍(下)
之前有分享到我们可以通过 Command Line API 来提高我们的开发效率.除此之外,还有一些比较有趣的快捷键和调试方法,也能帮助提高大家的生产效率. 几个小事项: 1.文中提到的快捷键 com ...
- PL/SQL DEVELOPER 使用小技巧
1,登录后默认自动选中My Objects 默认情况下,PLSQL Developer登录后,Brower里会选择All objects,如果你登录的用户是dba,要展开tables目录,正常情况都需 ...
- Chrome使用中的小技巧
1.Chrome中如何截长图.如何模拟手机截长图: 参照这里,亲测有效:https://sspai.com/post/42193
- Opera浏览器导出收藏到Chrome,和几个Chrome的一些小技巧
Opera浏览器还是不错的,但是用着不是特别爽,老是感觉怪怪的,也说不上来哪里不好. 还是换回了Chrome浏览器,Chrome浏览器有一个让我念念不忘的地方,就是收藏夹会自动显示,当打开网页之后,又 ...
- 优雅且高效的使用Chrome Developer Tools
2019独角兽企业重金招聘Python工程师标准>>> 上集 下集 转载于:https://my.oschina.net/uniquejava/blog/492308
- 【chrome】 谷歌小技巧 谷歌浏览器 自带 滚动截图 chrome滚动截屏(全屏截图)
1.进入要截图的界面点击F12 点击右上角的三个点 然后选择 Run Command 2.输入 full 关键字 输入后选择 Capture full size screenshot 即可完成全屏截图 ...
最新文章
- (30)导入时如何定制spring-boot依赖项的版本【转载】【从零开始学Spring Boot】...
- 硬分叉升级加速BCH相关应用研发
- qml基础学习 基础概念
- docker容器互联实战
- linux DNS辅域
- android VectorDrawable使用笔记(二)
- 数据库MYSQL学习系列二
- JS判断是否是科学计算结果并处理
- react设置static defaultProps报错问题解决
- php程序yii是什么意思,yii是啥意思?
- 简要说明php数组的类型,php数组的概述及分类与声明代码演示
- c++ 一个函数包括多个返回值判断_整活函数式编程
- 微服务的设计模式,你用了几个
- 清除微信小程序button的默认样式
- python识别视频中火焰_基于yolov3和python框架的火焰识别检测算法
- 想自由查看自己网站每个页面流量情况?这个工具可以满足需求!
- 如何编辑程序(一个简单的程序)
- span标签鼠标悬浮出现手图标
- Ant自动构建JavaWeb
- java求圆的周长、面积
热门文章
- 基于Lucene查询原理分析Elasticsearch的性能
- 【Spring】BeanUtils.copyPorperties()的IllegalArgumentException原因分析
- (39.3) Spring Boot Shiro权限管理【从零开始学Spring Boot】
- SharePoint 2013 入门教程之创建页面布局及页面
- Ollydbg 中断方法浅探
- 巧用Windows server 2008密码重置盘
- 第一章 Joomla!扩展开发:概况
- CSS的三种使用方式
- JS一起学04:函数返回值、定时器、随机数、自动播放的幻灯片
- JavaScript 动态加载脚本和样式的方法