一、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. js面向对象轮播图写法

    ;;}         ,,,;}         ];     ].].;     ){             ;             ;         }) } Banner.protot ...

  2. Django url处理

    Django如何处理一个请求当一个用户请求Django 站点的一个页面,下面是Django 系统决定执行哪个Python 代码遵循的算法:1:Django 决定要使用的根URLconf 模块.通常,这 ...

  3. SAP物料主数据的屏幕字段控制,必输,隐藏

    http://www.cnblogs.com/275147378abc/p/5699077.html 1.事务码MM01,把物料组设为选填字段. 2.找到物料组的屏幕字段. 3.在后台根据屏幕字段找到 ...

  4. angularjs 自定义服务(serive,factory,provder) 以及三者的区别

    1.Serive 服务:通过service方式创建自定义服务,相当于new的一个对象:var s = new myService();,只要把属性和方法添加到this上才可以在controller里调 ...

  5. redis之哨兵(Sentinel)

    Redis-Sentinel是redis官方推荐的高可用性解决方案,当用redis作master-slave的高可用时,如果master本身宕机,redis本身或者客户端都没有实现主从切换的功能. 而 ...

  6. Trie(字典树,前缀树)_模板

    Trie Trie,又经常叫前缀树,字典树等等. Trie,又称前缀树或字典树,用于保存关联数组,其中的键通常是字符串.与二叉查找树不同,键不是直接保存在节点中,而是由节点在树中的位置决定.一个节点的 ...

  7. ruby require的使用

    引用单个文件 例: 引用当前rb同目录下的file_to_require.rb先介绍3种方法 require File.join(__FILE__, '../file_to_require') req ...

  8. SSH远程登录和端口转发详解

     SSH远程登录和端口转发详解   介绍 SSH 是创建在应用层和传输层基础上的安全协议,为计算机上的 Shell(壳层)提供安全的传输和使用环境. SSH 只是协议,有多种实现方式,本文基于其开源实 ...

  9. 001---Python简介

    编程语言: 机器语言 最底层,更容易被计算机识别,执行速度最快 复杂,开发效率低 汇编语言 比较底层,执行速度较快 同样复杂 高级语言 编译型语言:先编译,后执行.生成独立的可执行文件.是计算机可以理 ...

  10. BootCDNApi使用记录

    通过API获取BootCDN所加速的所有前端开源库的基本信息和文件列表 API 将一下API链接中的.min字样去掉后,获取到的JSON格式的返回信息是经过良好的格式化的,便于查看. 所有开源库简要信 ...