最近在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标志会自动启动浏览器调试模式
又到了博客的末尾,今天推荐的音乐是《认真的老去》,希望你和我都别错过日落和夕阳,不论在哪里呀。
如果觉得《WebStorm+Chrome插件JetBrains IDE Support进行实时调试》对你有帮助,请点赞、收藏,并留下你的观点哦!