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进行实时调试相关推荐
- 谷歌浏览器安装webstorm插件JetBrains IDE Support Chrome下载地址及使用方法实现自动刷新
1,参考链接:JetBrains IDE Support Chrome插件使用方法.如果插件安装失败考虑下载低版本谷歌浏览器 怎么在谷歌浏览器中安装.crx扩展名的离线chrome插件 2,下载地址: ...
- webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器
#webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器 -- 工欲善其事 必先利其器##各工具介绍 `webstorm`是**JetBrains** ...
- JS And Vue代码调试——IDEA+JS+vue-devtools-dev+JetBrains IDE Support（Chrome插件）
JS代码调试--IDEA+JavaScript Debug+JetBrains IDE Support(Chrome插件) 问题描述 解决方案 解决步骤 问题描述 调试JavaScript代码,前端框 ...
- JetBrains IDE Support的安装
昨天,某落魄前端改烤串程序猿向我推荐了WebStorm这个工具,捅了一天,格外喜欢,难怪号称最好的为专用于web开发的编辑器. 话不多说,刚接触不多,还没摸明白,就现在说说JetBrains IDE ...
- 我使用的Chrome插件列表
AdBlock 用来屏蔽广告的,有一些网站会探测出你在使用AdBlock.如果一定要继续浏览的话,你可能需要暂停一下AdBlock Vimium 非常推荐喜欢vim的用户试试看这款插件,它的主要特色是 ...
- debug idea js_IntelliJ IDEA 配置chrome插件调试js代码 - 狂奔的熊二 - 博客园
调试js代码,每次都在要在代码中写debugger,或者在chrome中打断点,而且chrome的断点信息不人性化.偶然发现idea竟然有这个功能,简直神器啊.研究了半天终于搞定了,哈哈,开心.下面是 ...
- IntelliJ IDEA 配置chrome插件调试js代码
调试js代码,每次都在要在代码中写debugger,或者在chrome中打断点,而且chrome的断点信息不人性化.偶然发现idea竟然有这个功能,简直神器啊.研究了半天终于搞定了,哈哈,开心.下面是 ...
- IDEA--JetBrains IDE Support 调试工具
直接在idea中打断点调试前端代码,解决在浏览器中调试前端代码的不便 1.在Chrome 浏览器地址栏中输入 chrome://extensions/ 2.把JetBrains IDE Support ...
- IDEA WebStorm 常用插件推荐
使用WebStorm,您无需安装任何其他插件即可直接工作-所有核心功能将立即可用. 但是,如果您希望自己的编码工具更加个性化或需要一些额外的功能,该怎么办? WeStorm提供了许多可以帮助您解决这些 ...
- 要速度更要方便!20款实用Chrome插件推荐
上次为大家推荐了10款Chrome 4.0插件,今天我们再次精心挑选了20款实用插件,感兴趣的不妨慢慢往下看吧!(注:本文所有插件均已在Google Chrome 4.0.249.78 + Windo ...
最新文章
- java sql 返回 json_java访问oracle 返回json 实践（一）
- 成功解决tensorboard调用events.out.tfevents文件得到网址出现No dashboards are active for the current data set问题
- C# .net web.config配置access连接字符串
- Java BigDecimal longValueExact（）方法与示例
- 在Ubuntu上下载、编译和安装Android 4.2 最新内核源代码（Linux Kernel）
- DB2存储过程分页测试
- 计算机二级C语言题库
- 等价类划分法用例设计
- 大连理工大学c语言第三次上机作业答案,第一次上机作业参考答案
- 友情链接对网站优化有什么作用
- php submit执行函数,jQuery.submit() 函数详解
- 高德GIS地图动态显示打点数据
- Web全栈~19.Java语言基本结构
- 【原创】将RGB图像转换到CMY空间
- OpenCV每日函数 几何图像变换模块 (8) remap函数
- 7-2 求一元二次方程的根
- 刘强东：B2C电商的本质
- 使用python编写一个完整的接口自动化用例
- js php浮层 滑动,JS实现动态移动层及拖动浮层关闭的方法
- 毕设-基于SpringBoot房屋租赁系统