调试工具

参考地址：https://www.jianshu.com/p/b63e6b7df8bf

最常用Chrome开发者工具

• Ctrl Shift i | Ctrl Shift j |F12

• 使用

  • Elements

    • styles
      • 选择页面元素 Ctrl Shift c
    • Computed
      • 只读 显示元素最终样式 查看元素最终属性值

  • Network

    • name：资源名称
    • status：http状态码
    • type：请求资源的MIME类型
      • MIME类型：描述消息内容类型的因特网标准
      • 类型名：https://www.w3school.com.cn/media/media_mimeref.asp

  • Source

    • 断点快捷键
      • F8: 继续执行 F10: step over, 单步执行, 不进入函数 F11: step into, 单步执行, 进入函数 shift + F11: step out, 跳出函数 ctrl + o: 打开文件 ctrl + shit + o: 跳到函数定义位置

  • TimeLine

    • 查看脚本执行时间，页面元素渲染时间
    • 结合profiles进行js性能分析

  • Console

    • console.log 普通信息

    • console.info 提示类信息

    • console.error 错误信息

    • console.warn 警示信息

    • console.group & console.groupEnd 信息分组

    • console.table 以表格形式将数据输出

    • console.assert 对传入表达式进行断言（没太看懂）

    • console.count 计数

    • console.time & console.timeEnd 看耗时情况

    • console.profile & console.profileEnd cpu信息

IETest：I浏览器版本切换工具（没用过）

Emmet：仿css选择器语法生成代码，提高代码编写速度（没用过）

JSON格式校验工具：https://jsonformatter.curiousconcept.com/

JS压缩和解压缩工具：http://tool.oschina.net/jscompress http://tool.css-js.com/

抓包工具