失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > WebStorm+Chrome插件JetBrains IDE Support进行实时调试

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

时间:2021-04-30 18:26:38

相关推荐

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标志会自动启动浏览器调试模式

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

如果觉得《WebStorm+Chrome插件JetBrains IDE Support进行实时调试》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。