前端代码调试:Webstorm调试js
来源:互联网 发布:彩虹六号配件知乎 编辑:程序博客网 时间:2024/06/05 20:04
【前言】
目前前端开发JavaScript的debug一般都是用chrome和firefox的开发者工具进行调试,浏览器工具使用不方便,webstorm支持了在代码上打断点,在编辑器里debug js代码。类似Java后台 Eclipse debug效果。接下来就给大家介绍如何安装webstorm和对webstorm进行配置调试代码。
【Webstorm下载与安装】
1.官网地址:https://www.jetbrains.com/webstorm/
2.选择下载的版本,点击download
3.点击安装即可
【代码调试方法】
1.安装chrome的插件
这一步需要翻墙,打开Chrome然后打开Web Stroe,搜索"jetbrains ide support",在Extensions中找到如图:
安装它,安装成功后Chrome的右上角应该出现扩展程序JetBranins IDE Support
的图标
二、在WebStorm中新建一个项目
三、新建debug配置项
点击右上角这个图标
新建一个JavaScript Debug
填写一个名字,随意起,选择URL,还有浏览器,这里浏览器当然选择Chrome,然后确定
四,开始调试程序
打断点
运行Debug模式
不出意外的话,应该会自动打开你的Chrome,并且有一行debug提示
WebStorm这边应该是已经断点,并且可以进行调试了
调试界面功能齐全,不比Chrome自带工具差,如果要调试element style只能在Chrome了。
五、其它说明
大部分项目都不是利用WebStorm内置的WebServer运行项目的,比如更多的是使用Tomcat、browser-sync
这类工具,因为API部分需要访问server-end,但也没有问题,假如你的项目启动后,访问地址为:localhost:3000,那么你在添加Debug的界面就要改成如下:
其它不变。右键JetBrains IDE Support这个插件,可以打开选项,界面非常简单
这个插件能够跟IDE通讯,其实是通过一个Host和Port链接IDE的,也就是WebStorm打开时已经自动启动一个Debuger Server,任何遵照它的协议连接上它即可实现IDE调试,我们打开IDE的属性,然后搜索Debugger,会发现这些配置信息,默认端口为63342
,你可以修改这个端口,一般情况下没必要修改,如飞防火墙或者其它程序占用了端口才会去修改它
其中有一项
Can accept external connections
这个选项默认未勾选,如果需要在其它电脑上访问IDE内置的WebServer,就要勾选这个选项,否则只允许127.0.0.1 or localhost
访问WebServer,当然,如果你的程序不依赖IDE的内置的WebServer那么这个选项也没必要勾选了。
最后大家可以动手试一试!
- 前端代码调试:Webstorm调试js
- 前端代码调试:Webstorm调试js
- WebStorm Tomcat 调试 js
- webstorm js调试工具
- 前端页面js调试
- js前端调试
- node.js在webstorm 11中的调试
- 在WebStorm中调试NodeJS代码
- 前端Js调试命令:console
- 前端 js 调试的方法
- WEB前端代码调试总结
- Google浏览器调试前端代码
- firebug调试js代码
- JS调试代码
- js代码调试错误
- 动态调试JS代码
- Js代码调试心得!
- js代码的调试
- elasticsearch-wildcard、regexp通配符与正则表达式查询
- 110. Balanced Binary Tree
- Delphi CreateMutex 防止程序多次运行
- strong和copy
- 类与类之间的关系图(Class Diagram,UML图)
- 前端代码调试:Webstorm调试js
- Oracle存储过程实例
- UML建模之活动图介绍(Activity Diagram)
- 算法的力量万变不离其宗
- 银联接入--android热点问题解析
- ionic ng-model controller中取不到值(input)
- JAVAWEB开发之文件的上传与下载(开源组件commons-fileupload的详细使用)
- java的(PO,VO,TO,BO,DAO,POJO)解释
- 创建很多子窗口1,再在子窗口1创建子窗口2