使用webstorm进行javascript的Debug调试功能

所属分类: 软件教程 / 编程开发 阅读数: 1033
收藏 0 赞 0 分享

一、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里面进行调试了,效果那是非常的强大。

二、相关软件安装和配置安装WebStorm
WebStorm官网:( https://www.jetbrains.com/webstorm/ ) 安装Chrome和JetBrains IDE Support
JetBrains IDE Support的地址是:
https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji
不过一般都是被墙了,所以得翻墙去安装插件了。
不懂的人可以直接安装蓝灯软件,很方便翻墙。
这里写图片描述

配置端口(不是必须的)
如果你的端口刚好被占用,那么记得修改相应的端口Chrome和WebStorm都要修改
这里写图片描述
WebStorm对应修改的地方:
这里写图片描述

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

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

更多精彩内容其他人还在看

VS2013 ultimate许可证已过期无法输入序列号该怎么办?

VS2013 ultimate许可证已过期无法输入序列号该怎么办?看到很多网友遇到这个问题都是直接卸载从新安装的,但是又要重新设置软件,很麻烦,今天教大家一个比较简单的方法,不需要重装软件,需要的朋友可以参考下
收藏 0 赞 0 分享

DW站点中新建文件夹和修改、删除、移动文件方法图解

下面为大家分享DW站点中新建文件夹和修改、删除、移动文件方法,教程真的很不错,很基础,适合新手来学习,推荐过来,一起来学习吧
收藏 0 赞 0 分享

Eclipse怎么快速开发jni程序?

Eclipse怎么快速开发jni程序?开开发软件的时候需要配置结合java和c++的程序开发环境,才能达到两者都支持Eclipse,下面我们就来看看详细的配置方法
收藏 0 赞 0 分享

Xmanager Enterprise 5怎么破解安装?

Xmanager Enterprise 5怎么破解安装?Xmanager5是一款浏览远端X窗口系统的工具。在工作中经常使用Xmanager来登录远端的Solaris系统,下面我们来看看Xmanager5的破解安装方法
收藏 0 赞 0 分享

MyEclipse怎么新建Servlet? MyEclipse快速创建Servlet的方法

MyEclipse怎么新建Servlet?今天我们来教大家创先项目Servlet的方法和在项目中创建Servlet的方法,下面分享MyEclipse快速创建Servlet的两种方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver创建表格和表格的编辑方法介绍

这篇教程是向脚本之家的朋友分享Dreamweaver创建表格和表格的编辑方法,教程比较基础,适合新手来学习,推荐到脚本之家,大家一起来学习吧
收藏 0 赞 0 分享

在DW中创建层和为层里插入图像

这篇教程是向脚本之家的朋友分享在DW中创建层和为层里插入图像方法,教程很基础,适合新手来学习,推荐到脚本之家,喜欢的朋友来学习吧
收藏 0 赞 0 分享

Sublime Text怎么设置文件在新标签打开?

Sublime Text怎么设置文件在新标签打开?使用Sublime Text打开文档,总是在原来的窗口打开,覆盖了原来的文件,该怎么设置文件在新窗口打开呢?下面分享详细的设置方法,需要的朋友可以参考下
收藏 0 赞 0 分享

vs2012能编写c语言吗? VS2012编写c语言的方法

vs2012能编写c语言吗?想用Visual Studio 2012编写c语言,不知道能不能使用,今天我们来看看VS2012编写c语言的方法,下面我们来看看详细教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Android studio最近任务列表该怎么清空?

Android studio最近任务列表该怎么清空?Android studio记录了很多最近打开的开项目列表,想将这个记录清空,该怎么办呢?下面我们来看看Android studio清空最近打开项目列表的方法
收藏 0 赞 0 分享
查看更多