一、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 
    不过一般都是被墙了,所以得FQ去安装插件了。 
    不懂的人可以直接安装蓝灯软件,很方便FQ。 
  3. 配置端口(不是必须的) 
    如果你的端口刚好被占用,那么记得修改相应的端口Chrome和WebStorm都要修改 
     
    WebStorm对应修改的地方: 

三、WebStorm调试JavaScript

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

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


这样可以有更加清晰明了的调试效果啦。

WebStorm强大的调试JavaScript功能(转载)的更多相关文章

  1. WebStorm 调试JavaScript

    WebStorm强大的调试JavaScript功能 Vue项目调试总结-WebStorm+Chrome调试 WebStorm+Chrome插件JetBrains IDE Support进行实时调试 W ...

  2. Chrome 中的 JavaScript 断点设置和调试技巧 (转载)

    原文地址:http://han.guokai.blog.163.com/blog/static/136718271201321402514114/ 你是怎么调试 JavaScript 程序的?最原始的 ...

  3. 调试javascript

    Chrome 控制台 如何调试javascript 上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javasc ...

  4. Chrome 控制台 如何调试javascript

    上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1 ...

  5. Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法

    转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...

  6. chrom调试javascript

    上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1 ...

  7. 你是怎么调试 JavaScript 程序

    你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用 ...

  8. 如何利用好chrome控制台这个神器好好调试javascript代码

    上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1 ...

  9. chrome调试JavaScript脚本

    随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaSc ...

随机推荐

  1. CALayer简介(转)

    一.简单介绍  在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮,一个文本标签,一个文本输入框,一个图标等等,这些都是UIView.  其实UIView之所以能显示在屏幕上,完全 ...

  2. JAVA如何跨项目调用接口

    public String load(String url, String query) throws Exception { URL restURL = new URL(url); /* * 此处的 ...

  3. zepto 基础知识(4)

    61.prev prev() 类型:collection prev(selector) 类型:collection 获取对相集合中每一个元素的钱一个兄弟节点,通过选择器来进行过滤 62.prev pr ...

  4. Plupload使用API

    Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的<input type=”file” />.Plupload会自动侦测当前 ...

  5. Django从请求到返回流程

    图1:流程图 1. 用户通过浏览器请求一个页面2.请求到达Request Middlewares,中间件对request做一些预处理或者直接response请求3.URLConf通过urls.py文件 ...

  6. mysql 中的存储过程

    创建一个简单的存储过程 存储过程proc_adder功能很简单,两个整型输入参数a和b,一个整型输出参数sum,功能就是计算输入参数a和b的结果,赋值给输出参数sum: 几点说明: DELIMITER ...

  7. 路由器基础设置之ospf

    我们将以上面的拓扑图来进行实验,要用ospf的协议达到全网互通的效果 router1: enable 进入特权模式 config t 进入全局配置模式 interface L0 ip address ...

  8. git stash应用

    今天在看一个bug,之前一个分支的版本是正常的,在新的分支上上加了很多日志没找到原因,希望回溯到之前的版本,确定下从哪个提交引入的问题,但是还不想把现在的修改提交,也不希望在Git上看到当前修改的版本 ...

  9. android 自定义图片圆形进度条

    感觉话一个圆形进度条挺简单的 ,但是却偏偏给了几张图片让你话,说实话我没接触过,感觉好难,还好百度有大把的资源,一番努力下终于画出来了. 代码如下. package com.etong.cpms.wi ...

  10. git push之后回滚(撤销)代码

    问题描述:首先,先说明一下,为什么会引发这次的话题,是这样的,我做完功能Agit push之后,2个月后需求部门要求不要功能A了,然后需要在没有功能A的基础上开发,怎么办?赶紧回滚代码呀. 然后我用g ...