0
点赞
收藏
分享

微信扫一扫

前端工具 - 开发者工具(F12)


零、Common

  1. 全局搜索:Ctrl + Shift + F
    前端工具 - 开发者工具(F12)_JS
  2. 竖排三个点的省略号 --> More Tools --> Network conditions 中可以模拟其他浏览器(设备终端)
    Ps:Select automatically 打勾,否则有时候会出现意想不到的显示BUG。
  3. 待更新...

一、Elements

  1. 伪类可触发效果:先触发,再检查源代码,再用Filter过滤出伪元素的CSS。
  2. 待更新...

二、Console

  1. console.group()、console.groupEnd() // 输出信息分组
  2. console.dir() // 显示所有对象的属性和方法
  3. console.time() …… console.timeEnd() // 时间跟踪,记录代码运行时间
  4. 待更新...

三、Sources

  1. 模糊搜索文件
    前端工具 - 开发者工具(F12)_JS_02
  2. 暂停断点
    前端工具 - 开发者工具(F12)_CSS_03
    前端工具 - 开发者工具(F12)_JS_04
  3. 跳过下一个方法执行
    前端工具 - 开发者工具(F12)_前端工具_05
  4. 进入方法
    前端工具 - 开发者工具(F12)_前端工具_06
  5. 跳出方法
    前端工具 - 开发者工具(F12)_前端工具_07
  6. 断点生效 / 失效前端工具 - 开发者工具(F12)_开发者工具(F12)_08
    前端工具 - 开发者工具(F12)_开发者工具(F12)_09
  7. 添加断点(或者左边line点击下该行)前端工具 - 开发者工具(F12)_前端工具_10
    前端工具 - 开发者工具(F12)_开发者工具(F12)_11
  8. 部分断点失效
    前端工具 - 开发者工具(F12)_开发者工具(F12)_12
  9. 移除所有断点
    前端工具 - 开发者工具(F12)_Firebug_13
  10. 在异常暂停
    前端工具 - 开发者工具(F12)_开发者工具(F12)_14
  11. 在异常(包括try...catch捕获的异常)暂停
    前端工具 - 开发者工具(F12)_前端工具_15
    Ps:Pause On Caught Excepetion:
    (1)不勾上Pause On Caught Excepetion:只捕获try catch代码块外的语法错误(有时会因为语法错误而导致代码没有正确运行)。
    (2)勾上Pause On Caught Excepetion:try catch代码块内外的异常或语法错误都会被捕获,并且会暂停。
  12. Debug中,选中变量或表达式直接显示结果。
  13. 与后台对接错误调试:调试压缩过的代码,点击左下角{ } pretty print,可以格式化代码。
  14. 事件监听断点:如果是一个没有ID和JS代码的按钮,应该怎么调试?
    Souces面板中,右侧工具,Event Listener Breakpoints,勾选相应事件。比如:Click 事件,然后点击按钮,就会暂停在这个事件,就会出现相应的JS代码。
  15. 待更新...

四、Network

  1. XHR:监听ajax请求(如搜索提示)当服务器发送post或get请求时,它会监听这些请求,并在下面罗列出来,其中的参数就是我们请求的url或者post中的一些名字和字符;头信息是我们请求和回应的头信息;响应是实际中从服务器接收到的信息。
  2. 当请求迟迟得不到响应时,查看“Network”,如果发送的请求处于pending状态,说明后台出现问题。
  3. 待更新...

五、User agent stylesheet

  • 浏览器默认样式

附:

  1. 火狐浏览器只能模拟其他设别的分辨率不能模拟其他设备的功能,但谷歌内核的浏览器可以做到。
  2. 待更新...


举报

相关推荐

0 条评论