WebStorm强大的调试JavaScript功能

原创 2017年01月06日 20:28:47

一、JavaScript的调试

目前火狐和Chrome都具备调试JavaScript的功能,而且还是相当的强大。如果纯粹是用浏览器来进行js调试的话,我比较喜欢用火狐。火狐可以安装各种插件,真的是非常适合开发者。不过今天的主角并不是火狐,也不是Chrome,而是号称最智能的JavaScript IDE:WebStorm。

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

其实WebStorm之所以支持调试JavaSccript,其实也是借助了Chrome,只要Chrome安装JetBrains IDE Support插件,就可以直接在WebStorm里面进行调试了,效果那是非常的强大。

二、相关软件安装和配置

  1. 安装WebStorm
    WebStorm官网:( https://www.jetbrains.com/webstorm/ )
  2. 安装Chrome和JetBrains IDE Support
    JetBrains IDE Support的地址是:
    https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji
    不过一般都是被墙了,所以得翻墙去安装插件了。
    不懂的人可以直接安装蓝灯软件,很方便翻墙。
    这里写图片描述
  3. 配置端口(不是必须的)
    如果你的端口刚好被占用,那么记得修改相应的端口Chrome和WebStorm都要修改
    这里写图片描述
    WebStorm对应修改的地方:
    这里写图片描述

三、WebStorm调试JavaScript

  1. WebStorm增加JavaScript调试选项
    增加个TestJS的项目工程,直接选择Empty Project类型即可
    然后自己增加相应的html和js文件
    在工程的右上角那里,点那个下尖符号,弹出 Edit Configurations
    这里写图片描述
    点绿色的+号,然后选择JavaScript Debug
    这里写图片描述
    配置好相关路径就可以了
    这里写图片描述

2.运行调试效果
点击那个绿色的甲虫,就可以看到实际的调试效果了。这个时候Chrome会有下面的提示
这里写图片描述
会自动切换回WebStorm的调试界面
这里写图片描述
如果仅仅是这样,那么跟其他浏览器的调试区别还是不是非常大,唯一的好处就是方便了,不用去切换。
下面的效果我觉得才是更加的调试效果,因为他可以直接把一些参数类型、数值结果直接显示在代码上面。
注意那个绿色的字体效果:
这里写图片描述
这里写图片描述
这样可以有更加清晰明了的调试效果啦。

版权声明:本文为博主原创文章,转载必须声明出处和作者。地址:http://blog.csdn.net/sujun10 作者:弃天笑

用webstorm进行javascript的Debug

本来想些一个关于karma+jasmine单元测试覆盖率和如何与kenkins配合使用,发现已经有一篇写的很好的了,而且验证是可以用的。地址直接贴上了:http://www.myexception.c...
  • yangyuhan156
  • yangyuhan156
  • 2015年10月04日 20:35
  • 20053

前端代码调试:Webstorm调试js

【前言】 目前前端开发JavaScript的debug一般都是用chrome和firefox的开发者工具进行调试,浏览器工具使用不方便,webstorm支持了在代码上打断点,在编辑器里debug j...
  • happybruce8023
  • happybruce8023
  • 2016年11月30日 11:57
  • 10172

使用WebStorm创建/运行/调试React Native项目

说在前面 使用的WebStorm版本是2017.1.1. 一. 创建React Native项目 1.File->New->Project 2.在New...
  • houtrry
  • houtrry
  • 2017年04月25日 15:51
  • 9334

使用WebStorm调试node工程

coder比较偏好debug,调试node比较麻烦,我们借助高大上的工具webStorm(我用的是10)来调试node,配置也比较简单,直接上图: 首先,配置node环境,在导航栏选择”Edit/c...
  • houyaowei
  • houyaowei
  • 2016年05月18日 16:03
  • 483

WebStorm断点调试

小码哥教育 2017-02-27 14:18 最近HTML5很火,而且大家都在用WebStorm开发工具,但是有个问题是我们写JavaScript怎么像其他编辑器那样进行断点调试呢,今天就带...
  • u011277123
  • u011277123
  • 2017年02月28日 09:05
  • 5182

webstorm配置node服务启动debug(v8debug is not defined)

之前项目使用的node环境是node4.4版本,一直正常,今天升级了下node(6.x版本)版本,之前的配置不变,在WebWstorm中就启动不了了; 报错:v8debug is not defin...
  • xw505501936
  • xw505501936
  • 2017年06月16日 14:02
  • 2054

使用webstorm调试nodejs

一、使用webstorm启动 nodejs web app 二、配置debug调试的 nodejs web app 三、给nodejs设置断点 四、单步调试nodej...
  • hbiao68
  • hbiao68
  • 2016年10月21日 11:53
  • 5506

自学Node.js: WebStorm+Node.js开发环境的配置

WebStorm是作为JS开发IDE存在的,并且支持流行的Node.js以及JQuery等js框架。而Node.js简单说就是一个JS类库并且配备有Google的V8 js引擎来解析和执行js脚本。 ...
  • lfsfxy9
  • lfsfxy9
  • 2013年03月30日 23:35
  • 81939

WebStorm+Node.js开发环境的配置

WebStorm+Node.js开发环境的配置 时间:2015-03-13 15:50:49      阅读:22349      评论:0      收藏:0      [点我收藏+] 标...
  • bing_JavaScript
  • bing_JavaScript
  • 2016年10月10日 12:14
  • 19342

WebStorm 开发javaScript

1、 http://nodejs.org/#download 下载nodejs 并安装 2、下载webstorm并安装 webstorm安装后的一些设置技巧: 如何更改主题(字体&配色): Fil...
  • u011269801
  • u011269801
  • 2016年06月24日 09:30
  • 1048
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WebStorm强大的调试JavaScript功能
举报原因:
原因补充:

(最多只允许输入30个字)