上一章了解了console 的在控制台中的使用方法,本文来介绍一下开发者工具的快捷键的使用。
- Ctrl + p:快速切换文件(在DevpTools 可以快速搜索和打开你项目中的文件)
2、Ctrl + shift + f:在源代码中搜索(搜索源代码的字符中特定串)
3、**Ctrl + g:**快速跳转到指定行
4、**Ctrl + o **:输入“?”,选择相应的操作
5、在控制台选择元素
-
$()–document.querySelector()简写,返回第一个和css选择器匹配的元素。例如$(‘div’)返回这个页面中第一个div元素
-
$$()–document.querySelectorAll()的简写,返回一个和css选择器匹配的元素数组。
-
$0-$4–依次返回五个最近你在元素面板选择过的DOM元素的历史记录,$0是最新的记录,以此类推。
6、使用多个插入符进行选择(在console 面板操作)
**按住 Ctrl ;鼠标点击要插入的地方**
7、保存记录(勾选在Console标签下的保存记录选项(Preserve log),你可以使DevTools的console继续保存记录而不会在每个页面加载之后清除记录。当你想要研究在页面还没加载完之前出现的bug时,这会是一个很方便的方法。)8、优质打印(或者叫做代码格式化:将页面引入的压缩过的代码解压出来)
Chrome’s Developer Tools有内建的美化代码,可以返回一段最小化且格式易读的代码。Pretty Print的按钮在Sources标签的左下角(左下角有一个“{}”的符号)。
在 source 文件:Ctrl + D
10、强制改变元素的状态
DevTools有个可以模拟CSS状态的功能,例如元素的hover和focus,可以很容易改变元素样式。在CSS编辑器中可以利用这个功能
11、改变颜色格式
在颜色预览功能使用快捷键**Shift + **点击,可以在rgba、hsl 和 hexadecimal 来回切换颜色的格式
12、直接编辑页面
在console 中输入下列命令:document.designMode = "on";
13、使用** inspect(elem)**跳转到 elements 指定的元素节点
14、使用 **value(object)**获取对象的所有属性,返回数组
15、在source 面板中的 js 文件中使用 alt + - 和 alt + = 可以在上一个鼠标位置和下一个鼠标位置进行跳转
16、在 elements 面板上 对预览的图片右击 open ,在预览的图片右键选择 copy image as data URI ,可以将图片转为base64 编码
17、使用 Ctrl + click 可以创建多个编辑点,使用 Ctrl + u 可以取消最后一处编辑点
18、按住 alt 键,可以在文件中创建一个矩形选区
19、在 Elements 面板右侧的 Event Listeners 选项卡中,在绑定的事件上右键可以跳转到相应的 JS 代码
20、数值调整快捷键
- Up / Down,增加或减少 1 单位
- Shift + Up / Down,增加或减少 10 单位
**- Alt + Up / Down,增加或减少 0.1 单位
**21、使用 Ctrl + [ 或者 ] 可以循环切换开发者工具的各个面板
22、使用** console.trace()** 可以追踪代码执行过程中的栈信息
23、使用** Tab 键**可以在 CSS 样式规则中进行遍历选定,选定的目标包括:选择器、属性和属性值。如果想跳回上一个目标,使用 Shift + Tab
24、Ctrl + Shift + I : 打开开发者工具窗口
25、Ctrl + Shift + C: 可以直接把鼠标发在页面上看具体的元素节点