1、切换开发者工具的位置(上下左右)
ctrl + shift + D 默认可以将F12呼唤出来的DevTools开发者调试工具切换右边与底部
但 如果你将它通过鼠标(下图)
切换过位置 (默认是 右边和底部) 你现在切换位置到左边 那么使用这个快捷键之后
就是 从左边切到右边/之前的位置
2、切换F12工具面板菜单以及页面窗口
按下 ctrl + [ 和 ctrl + ] 可以从当前面板的分别向左和向右切换面板 按下 ctrl + 1 到 ``ctrl + 9可以直接转到编号1...9的面板 前提是 开启了 开发者工具(F12) 不然就是切换页面窗口了
3、打印
Ctrl + p 调节出打印面板 Esc 取消 前提是 不开启 开发者工具(F12) 不然就是 打开面板后的功能了
4、截屏
F12(ctrl + shift + i) 打开DevTools开发者调试面板 按ctrl + shift + p
之后出现 如下图
再输入 Capture full size screenshot 就可以截这个页面的整个图了(如果页面长就是长图)
5、切换主题
F12(ctrl + shift + i) 打开DevTools开发者调试面板 按ctrl + shift + p
之后 输入 theme 切换到 暗黑 在切一次 就是明亮
6、在浏览器中你的运行脚本
进入到 Sources 面板,在导航栏里选中 Snippets 这栏,点击 New snippet(新建一个代码块) ,然后输入你的代码之后保存,大功告成!现在你可以通过右击菜单或者快捷键: [ctrl] + [enter] 来运行它了
7、console打印操作
Console.log() 最普通的操作
Console.error(12) 用红色且带感叹号的形式打印出信息
console.table() 打印出键值对的表格
let demo = [ {name:'齐轩',sex:'男',age:27} ] console.table(demo) 用表格的形式打印出信息
console.time() 打印出程序运行时间
console.time() 计算程序的运行时间 console.time('计时器');for (var i = 0; i < 1000; i++) { for (var j = 0; j < 1000; j++) {} } console.timeEnd('计时器');
console.log() 打印出 带颜色的信息
console控制台输出内容换行和变色
console.log("请将简历发送至 %c ps_recruiter@baidu.com","color:red")
console.log("一张网页,要经历怎样的过程,才能抵达用户面前?\n一位新人,要经历怎样的成长,才能站在技术之巅?\n探寻这里的秘密;\n体验这里的挑战;\n成为这里的主人;\n加入百度,加入网页搜索,你,可以影响世界。\n")
8、Html元素调试
按一下 'h' 就可以隐藏你在元素面板中选择的元素。再次按下 'h' 可以使它出现。某些的时候这很有用:例如你想截图,但你想去掉里面的敏感信息。
当你想看看页面的某一部分在 DOM 树的不同位置的显示效果时,只需要拖动放置它(到指定的位置),就像在机器上的其他任何地方一样 :-)
如果你只是想移动你当前选中的元素,在 DOM 结构中往上挪一点或者往下挪一点,而不是拖动和放置,你同样可以使用[ctrl] + [⬆] / [ctrl] + [⬇] ([⌘] + [⬆] / [⌘] + [⬇] on Mac).
9、其他面板调起console面板
直接ESC 进行切换
ctrl+加号放大console面板的字体 减小相反+减号 F1设置(在F12的情况下打开) 里面 可以禁用缓存 Disable cache (while DevTools is open) notwork 网络面板 application 程序应用 sources 源码