一、内置调试工具
打开方式：F12或ctrl+shift+i或鼠标右键的检查
（一）Elements
（二）Console
（三）Sources
（四）Network
（五）模拟手机端或其他浏览器（userAgent设置）
二、chrome扩展开发插件
（一）Fehelper插件
（二）Wappalyzer插件
（三）VisualEvent插件
（四）JetBrains IDE Support 插件
（五）Web Developer 插件（个人认为不论对于前端还是UI设计师都是一款非常棒的插件）
三、webstorm
（一）常用快捷键
| 常用快捷键： |
|
| Ctrl+/ 或 Ctrl+Shift+/ |
注释（// 或者/*…*/ ），再按一下可取消注释 |
| Ctrl+F |
查找文本 |
| Ctrl+Shift+F |
全文查找 |
| Ctrl+G |
查找行 |
| Ctrl+R |
替换文本 |
| ctrl+N 或ctrl+Shift+N |
查找文件 |
| ctrl+Shift+alt+N |
通过一个字符快速查找位置 |
| F6 |
当前文件所在路径 |
| Shift+F6 |
重命名 |
| Ctrl+D |
复制行 |
| ctrl+Y |
删除一行 |
| Ctrl+Shift+Up/Down |
代码向上/下移动。 |
| F2 或Shift+F2 |
高亮错误或警告快速定位 |
| Ctrl+Shift+F7 |
高亮显示所有该文本，按Esc高亮消失 |
| Ctrl+B或Ctrl+鼠标左键单击 |
跳转到方法定义出 |
| Ctrl + Alt + B |
跳转方法实现处 |
| Ctrl + Shift + I |
快速打开定义处 |
| Alt + Up/Down |
跳转到上一个/下一个方法 |
| Alt+F1 |
查找代码所在位置 |
| Ctrl+Alt+L |
格式化代码 |
| Ctrl+P |
方法参数提示 |
| F3 |
查找下一个 |
| Shift+F3 |
查找上一个 |
| Ctrl + Delete |
删除文字结束 |
| 代码恢复： |
|
| vcs->Local History -> Show History |
只要webstorm不关闭，你的文件随时可以返回到之前的操作 |
| Ctrl + E |
查看最近打开的文件 |
| 断点： |
|
| Ctrl + F8 |
切换断点 |
| Ctrl + Shift + F8 |
查看断点 |
（二）js调试功能
上面插件部分已经说到添加JetBrains IDE Support插件，配合webstorm使用，使js的调试更加方便。
