文章目录
前言1. 打开Dev Tool (开发者工具)2.Dev Tool 简单使用2.1 快捷键2.2 禁用/开启页面 JavaScript2.3 隐藏`html`中的注释2.4 切换主题颜色2.5 截图screenshot2.5.1 节点屏幕截图2.5.2 截取区域屏幕截图2.5.3 截取完整尺寸的屏幕截图2.5.4 截取屏幕截图
2.6 开发者工具停靠位置
3.css调试3.1 节点检查3.2 查询DOM树3.3 编辑样式3.3.1 用auto-complete特性给元素添加样式3.3.2 让：hover常驻3.3.3 编辑class3.3.4 复制样式3.3.5 样式3.3.6 计算属性3.3.7 布局3.3.8 事件3.3.9 DOM属性
4.控制台 4.1 快捷键（打开控制台）4.2 介绍4.3 执行语句
5.源代码 5.1 断点调试5.2 监视变量
6.网络 7.存储 总结
前言
俗话说：工欲善其事，必先利其器，而作为前端开发工作的我们，必然首要了解自己的 器。谷歌作为最广泛的浏览器，了解及精通谷歌开发工具是可能极大提高开发速度的。
1. 打开Dev Tool (开发者工具)
菜单>更多工具>开发者工具 快捷键：F12 右击点击：检查
2.Dev Tool 简单使用
2.1 快捷键
WIN : ctrl + shift+p MAC: command+shift+p
2.2 禁用/开启页面 JavaScript
启用 禁用
2.3 隐藏html中的注释
隐藏 显示
2.4 切换主题颜色
切换为深色主题
切换为浅色主题
2.5 截图screenshot
2.5.1 节点屏幕截图
a. 选择节点 b. 截图方式 c. 结果
2.5.2 截取区域屏幕截图
a. 截图方式 b. 内容 c. 结果
2.5.3 截取完整尺寸的屏幕截图
a. 截图方式 b. 内容 c. 结果
2.5.4 截取屏幕截图
a. 截图方式 b. 内容 c. 结果
2.6 开发者工具停靠位置
3.css调试
3.1 节点检查
a. 打开开发者工具 b. 自动定位到DOM元素位置
- **根据DOM元素显示对应页面内容**
- 根据页面内容自动查找对应DOM元素 c. 查看DOM元素的内外边距
d. 移动端调试
3.2 查询DOM树
快捷键
win: ctrl + f mac: command + f
查询方式： Console
inspect(document.querySelector(选择器)）
3.3 编辑样式
3.3.1 用auto-complete特性给元素添加样式
3.3.2 让：hover常驻
3.3.3 编辑class
3.3.4 复制样式
3.3.5 样式
3.3.6 计算属性
3.3.7 布局
3.3.8 事件
3.3.9 DOM属性
4.控制台
4.1 快捷键（打开控制台）
Ctrl+Shift +JCommand+Option+J(MAC)
4.2 介绍
4.3 执行语句
$_返回上一条语句的执行结果 $0上一个选择的DOM节点($1,$2…)** Log级别筛选 console的用法
console.log('技术放肆聊') // 输出普通信息
console.info('技术放肆聊') // 输出提示信息
console.warn('技术放肆聊') // 输出警告信息
console.error('技术放肆聊') // 输出错误信息
console.debug('技术放肆聊') // 输出调试信息
console.dir() //可以显示一个对象所有的属性和方法
console.dirxml() //用来显示网页的某个节点(node)所包含的html/xml代码
console.assert() //用来判断一个表达式或变量是否为真，
console.time()和console.timeEnd() // 用来显示代码的运行时间
console.profile()和console.proileEnd() //用来分析程序各个部分的运行时间，找出瓶颈所在。
console.count() //统计代码被执行的次数
console.table() //表格显示方法
5.源代码
5.1 断点调试
浏览器打断点 debugger调试
在源码中通过代码debugger调试
条件中断代码执行
5.2 监视变量
6.网络
7.存储
总结
在此分享给大家一首我非常喜欢的诗吧！ 《自嘲》 本是后山人，偶做前堂客。 醉舞经阁半卷书，坐井说天阔！ 大志戏功名，海斗量福祸。 论到囊中羞涩时，怒指乾坤错！
承蒙大家喜欢，够我欢喜好多年！ 愿与君共勉之！
相关阅读
您阅读本篇文章共花了：
发表评论