chrome调试实践

恩恩,来扩展扩展chrome的开发技能。

http://www.ibm.com/developerworks/cn/web/1410wangcychromejs/
https://developers.google.com/web/tools/chrome-devtools/?hl=en 谷歌的一套开发环境与配置的推荐与chrome的高级使用

内容

  • Security:HTTPS
  • Elements
  • Sources
  • Network
  • Timeline
  • Profiles
  • Resources
  • Audits
  • 移动端调试
  • 网速设置network condition
  • sensors:简单的传感器数据模拟
  • 渲染:适用于动画类的性能分析
  • animations:分析页面的动画
  • Inspect device:通过USB连接电脑进行调试开发:https://developer.chrome.com/devtools/docs/remote-debugging#port-forwarding
  • search : 很方便的搜索

错误调试

自动暂停,并且定位

source面板开启,遇到错误直接暂停,定位到错位的脚本位置

设置条件断点

相比,我更喜欢在代码里加入console

在source里修改代码

对于使用webpack来说的话,我并不喜欢这个

总结

其实对于chrome的使用,丰富的插件和应用,简练的UI,而chrome的不断升级中对于开发者来说也是很友好的,真的是不断改进啊。那么其实,平常用的最多的是console、sourc、networke和Elements了,性能分析、内存占用这些我却很少用。