WebStorm+Chrome插件JetBrains IDE Support进行实时调试

      最近在WebStorm做项目，需要经常对于Chrome进行浏览器调试，从和我一同开发的小可爱那里听到Chrome有一个非常好用的插件，可以实时调试，所以就尝试安装了一下，第一次配置的时候出现了一些小问题，第二次配置后成功了，特将经验记录分享在这里。
一、安装Chrome插件
1.首先下载Chrome扩展程序JetBrains IDE Support

2.插件安装好后会在右上方看到标志，右键选项配置WebStorm的端口号，就可以和WebStorm连接。启动WebStorm后如果连接成功鼠标移动到标志上会有提示（我安装好插件后打开WebStorm端口号有自动配置）

二、在WebStorm中配置Live Edit，实现与浏览器实时刷新。（我第一次的时候就是因为没有配置这个，所以无法使html中dom元素与页面每一块内容实时对应）

三、启用插件进行实时调试
1.第一种方法
（1）配置好上面的步骤后，右键单击要debug的html文件，选择Debug xx.html。

（2）在终端会跳出地址，点击即可跳转到浏览器

（3）将代码放在右边，鼠标在标签上移动即可看到与页面元素相互对应

2.第二种方法
（1）添加JavaScript Degugger

（2）配置文件路径以及浏览器


（3）配置好后，选择该degugger，点击红色的debug标志会自动启动浏览器调试模式

      又到了博客的末尾，今天推荐的音乐是《认真的老去》，希望你和我都别错过日落和夕阳，不论在哪里呀。