跳到主要内容

Chrome

快捷键​

  • cmd + option + c：打开 Elements 面板并调试，C 代表 CSS
  • cmd + shift + c：打开元素调试
  • cmd + shift + j ：打开 Console 面板，J 用于 JavaScript
  • cmd + option + i：打开控制台
  • cmd + shift + i ：打开上次使用的任意面板，I 表示你的选择
  • cmd + shift + p ：打开命令面板，需要先打开控制台
  • cmd + p：搜索文件
  • /：聚焦到输入框

禁用 js：cmd + shift + p 输入javascript，选择Disable JavaScript即可。

Dom 操作​

  1. 选中元素，按下 H 键，可以隐藏页面元素，但是还占位
  2. 拖动元素，可以改变元素位置

调试​

Chrome DevTools 开发者工具

devtools.chrome.com

重新发起请求​

不用刷新页面

  1. 选中 Network
  2. 点击 Fetch/XHR
  3. 选择要重新发送的请求
  4. 右键选择 Replay XHR，或者直接按下 R 键

在控制台快速发起请求​

  1. 选中 Network
  2. 点击 Fetch/XHR
  3. 选择 Copy as fetch
  4. 在控制台粘贴代码
  5. 修改参数，回车

复制打印在控制台的变量值​

右键选择 Copy object

截长屏​

方式一、

  1. 打开控制台
  2. 输入 cmd + shift + p，执行 Command 命令
  3. 输入 Capture full size screenshot，按下回车

如果要截取选中的区域

  1. 在 Elements 标签菜单中选择元素
  2. 输入 cmd + shift + p，接着输入 Capture node screenshot

方式二、

在 Elements 中选中 html，然后右键选择 Capture node screenshot。也可以选中元素，截取部分

一键展开所有 DOM 元素​

option + 选中点击想展开的元素

控制台引用上一次执行的结果​

在控制台输入 $_

切换控制台主题​

  1. 打开控制台
  2. 输入 cmd + shift + p，执行 Command 命令
  3. 输入 Switch to dark theme 或者 Switch to light theme进行主题切换

"$"和"$$"选择器​

  • $：表示document.querySelector，如$('body')
  • $$：表示document.querySelectorAll