谷歌开发者工具的使用.pdfVIP

⾕歌开发者⼯具的使⽤ ⼀、⾕歌浏览器调试快捷键 1、Console() : 清除控制台消息 Ctrl + L Tab : ⾃动完成通⽤常缀 → : 接受建议 : 清除console的提⽰!!(实操查看源代码!!) Ctrl + U ↓ / ↑ :选中下⼀⾏/上⼀⾏ Enter: 执⾏代码或者命令 2、Debugger(调试⾯板) or : 暂停/继续 F8 Ctrl + \ or : 单步执⾏ F10 Ctrl + or : 单步进⼊ F11 Ctrl +; or : 单步退出 Shift + F11 Ctrl + Shift+; / : 上⼀帧/下⼀帧(译为框架怪怪的) Ctrl +.Ctrl+, : 被选中代码在控制台中打印出console信息(⾮常实⽤) Ctrl +Shift+E : 添加到debugger的watch⾥⾯,可以关注你选中内容的变化 Ctrl + Shift + A : 打断点/取消断点(很实⽤) Ctrl + B 3、Text Editor(⽂本编辑器) : 跳转到某个成员(不知鸟⽤) Ctrl + Shift+P : ⾃动完成 Ctrl + Space : 跳转到某⾏ Ctrl + G Ctrl + Shift + E : 跳转到之前的编辑位置 Alt + - : 跳转到下⼀个编辑的位置 Alt + + : 快捷键注释 Ctrl + / Alt +↑: 调整CSS度量单位,每次增加⼀个单元 Alt +↓: 调整CSS度量单位,每次减少⼀个单元 : 调整CSS度量单位,每次增加10个单元 Alt + PageUp : 调整CSS度量单位,每次减少10个单元 Alt + PageDown : 选择选中内容的下⼀个匹配内容 Ctrl + D : 软撤销 Ctrl + U : 进⼊匹配的括号 Ctrl + M : 关闭编辑便签 Alt + W : 切换相同名字的或者不同后缀的⽂件 Alt + O 4、All Panels(所有⾯板)——全局快捷键 :切换⾯板(向左向右) Ctrl + [ / Ctrl + ] : 返回之前之后的⾯板状态 Ctrl + Shift + [ / Ctrl + Shift+] :显⽰Console Ctrl + Tilde[~] : ⼩菜单弹出隐藏 Esc : 进⼊仿真设备模式(移动平板屏幕) Ctrl + Shift + M : 切换调试⾯板在底部还是侧边栏展⽰ Ctrl + Shift + D : 搜索内容 Ctrl + F : 在所有代码中搜索(跨域),很实⽤ Ctrl + Shift + F : 选择页⾯节点并且查看代码,最常⽤!! Ctrl + Shift + C : 快速切换源码⽂件,很常⽤! Ctrl + P 5、Style Pane(风格⾯板) / : 下⼀个/上⼀个属性 Tab Shift + Tab ↑: 增加CSS