曾经的选择是使用火狐浏览器的Firebug插件，具体的用法到时候在细说，这篇文章登场的是开发静态网页及javascript的利器--webstorm.

一.相关软件安装和配置

　　安装WebStorm 
　　WebStorm官网：( https://www.jetbrains.com/webstorm/ )

　　安装Chrome和JetBrains IDE Support 
　　JetBrains IDE Support的地址是： 
       https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji
　　不过一般都是被墙了，所以得FQ去安装插件了。

二、WebStorm调试JavaScript

1.WebStorm增加JavaScript调试选项

如图所示：在项目工程的右上角那里，点那个下尖符号，弹出 Edit Configurations 
 
点绿色的+号，然后选择JavaScript Debug

　　在此处配置好相关路径就可以了

2.运行调试效果

点击那个绿色的甲虫，就可以看到实际的调试效果了。这个时候Chrome会有下面的提示 
 
此时会自动切换回WebStorm的调试界面 

使用WebStorm进行javascript调试的更多相关文章

  1. WebStorm强大的调试JavaScript功能(转载)

    一.JavaScript的调试 目前火狐和Chrome都具备调试JavaScript的功能,而且还是相当的强大.如果纯粹是用浏览器来进行js调试的话,我比较喜欢用火狐.火狐可以安装各种插件,真的是非常 ...

  2. JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...

  3. 【转】HTML, CSS和Javascript调试入门

    转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html HTML, CSS和Javascript调试入门 本文介绍一些入 ...

  4. JavaScript 调试常见报错以及修复方法

    (看到一篇调试JS很有用的文章,收藏一下) JavaScript 调试是一场噩梦:首先给出的错误非常难以理解,其次给出的行号不总有帮助.有个查找错误含义,及修复措施的列表,是不是很有用? 以下是奇怪的 ...

  5. Javascript 调试利器 Firebug使用详解

    Javascript 调试利器 Firebug使用详解 有时候,为了更清楚方便的查看输出信息,我们可能需要将一些调试信息进行分组输出,那么可以使用console.group来对信息进行分组,在组信息输 ...

  6. IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...

  7. HTML/CSS/Javascript调试入门(转)

    推荐Chrome作为开发工具(FF可以使用FireBug,IE8和之后的版本也有自己的调试工具) 1.HTML的调试 将鼠标放在任意元素上,右键Inspect Element,即可查看该元素的HTML ...

  8. JavaScript 调试

    在编写 JavaScript 时,如果没有调试工具将是一件很痛苦的事情. JavaScript 调试 没有调试工具是很难去编写 JavaScript 程序的. 你的代码可能包含语法错误,逻辑错误,如果 ...

  9. JavaScript 调试常见报错以及原因

    JavaScript 调试常见报错以及原因 测试环境 chrome 版本 66.0.3359.170(正式版本) (64 位) TypeError 类型错误 不是操作符所接受的数据类型. //---- ...

随机推荐

  1. mint-ui在vue中的使用。

    首先放上mint-ui中文文档 近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码.github上面的分享,里面都是markdown文件,内容就是网上的文档 刚好自己 ...

  2. Python 列表嵌套多种实现方式

    #coding=utf-8 list=[] for i in range(1,101): list.append(i) # print(list) tempList=[] newList=[] whi ...

  3. Python扩展模块——selenium的使用(定位、下载文件等)

    想全面的使用selenium可以下载<selenium 2自动化测试实战-基于Python语言>PDF的电子书看看 我使用到了简单的浏览器操作,下载文件等功能... 推荐使用firefox ...

  4. Python内置函数(63)——property

    英文文档: class property(fget=None, fset=None, fdel=None, doc=None) Return a property attribute. fget is ...

  5. jquery 实时监听输入框值变化方法

    $('.offers-number').bind('input propertychange', function (a, b) { var value = $(this).val() if (!va ...

  6. 新概念英语（1-43）Hurry up!

    新概念英语(1-43)Hurry up! How do you know Sam doesn't make the tea very often? A:Can you make the tea, Sa ...

  7. Mego开发文档 - 从EF6/EFCore迁移到Mego

    从EF6/EFCore迁移到Mego框架 如果您有EntityFragmework6或EntityFragmeworkCore的开发经验,在首次接触Mego框架时会发现这两个框架非常相似,本文将帮忙您 ...

  8. 高级OOP特性（6）

    PHP不支持的高级OPP特性 PHP不支持通过函数重载实现多态 PHP不支持多重继承 PHP不支持根据所修改数据类型为操作符赋予新的含义 对象克隆 克隆实例 在对象前面添加clone关键字来克隆对象, ...

  9. nginx反向代理二级域名注意事项

    摘要 本文介绍了利用nginx实现多域名和多站点的绑定的方法及相关注意事项.您也可以只看本文的标题或红色标注部分.☺ 1.应用场景 我们经常会遇到在同一台服务器建立多个Web站点的情况,普遍的做法是为 ...

  10. python/MySQL（索引、执行计划、BDA、分页）

    ---恢复内容开始--- python/MySQL(索引.执行计划.BDA.分页) MySQL索引: 所谓索引的就是具有(约束和加速查找的一种方式)   创建索引的缺点是对数据进行(修改.更新.删除) ...