草依山的Javascript世界

一个Javascript程序猿的学习纪录剩地,不仅仅是JS,还有Linux、Mac、nodeJs、吃、玩!

chrome开发者工具部分忽略的功能

算是学习笔记,一些忽略的功能

快捷键

  • cmd+ [cmd + ]切换开发者工具的不同tab面板,这和vim里切换tab是一致的
  • ESC 在每个面板切换显示console面板

功能

Elements

  • 选中元素时,右键上的copy css pathcopy xpath,有时候非常有用
  • 可以通才拖拽改变节点顺序
  • 选中元素时,h键可以切换元素的显示隐藏(丝姐补充)

Styles

  • Toggle element state可以查看不同状态下的元素样式

DOM Breakpoints

  • 右键添加 Break on,可以用来查看节点被哪个脚本修改

Source

  • 添加XHR breakpoints来拦截特定的异步请求
  • Call Stack 里对语句右键可以Restart Frame在当前语句重新执行
  • 添加black box script忽略在某些库代码里不停的跳转,设置面板里Source会有管理黑盒js的功能
  • 勾选Async可以捕捉异步调用的Call stack
  • cmd+d 可以多选文本 (丝姐补充)

Console

  • monitorEvents监听事件,monitorEvents(document, ['click'])监听document的click事件 
文章地址: chrome开发者工具部分忽略的功能
欢迎关注我的微博与我交流:@草依山
Github上也有一些东西:[Github]
所有文章坚决抵制jb51.net的转载!
标签: chrome 1
2015-08-25

相关文章

2017-02-13 new做了些什么
2016-09-29 [翻译]bash的各种文件载入执行顺序
2016-05-31 phantomjs在linux下截图中文字体问题
2016-04-24 Promise的错误处理
2016-02-23 URL里的+

文章修改纪录

加载中...
Copyright © 2013. Create By 草依山, Fork