chrome开发者控制台小技巧(个人向总结)

  1. 元素选择器($)
$ // 相当于 document.querySelector 。  
$$ // 相当于 document.querySelectorAll 。  
$_ // 返回上一个表达式的值  
$0-$4 // 返回最近5个Elements面板选中的DOM元素。  
dir //  console.dir  
  1. 让chrome变成编辑器
    document.body.contentEditable=true
  2. 在源代码中搜索
    快捷键是Ctrl + Shift + F (Cmd + Opt + F),支持正则表达式
  3. 代码格式化
    有时在控制台的Sources查看文件,会看到压缩代码,点击左下角中括号自动转换格式。
  4. 改变颜色格式
    在颜色预览功能使用快捷键Shift + Click,可以在rgba、hsl和hexadecimal来回切换颜色的格式
  5. 断点调试
    在sources里要调试的地方添加 debugger或者单击代码左侧,即可将代码执行在此处冻结

你可能感兴趣的:(chrome开发者控制台小技巧(个人向总结))