曾经的选择是使用火狐浏览器的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. 【iOS】swift-获取webView的高度

        func webViewDidFinishLoad(webView: UIWebView) {         let webHeightStr = webView.stringByEvalu ...

  2. raid5 阵列硬盘离线数据恢复成功案例

    数据恢复故障描述: 某研究院 DELL 磁盘阵列崩溃,内置15块1TB硬盘搭建的RAID5阵列.一开始有一块硬盘离线,在更换新硬盘进行同步的过程中,第二块磁盘指示灯报警,同步失败,阵列无法正常工作. ...

  3. 关于TomCat上传文件中文名乱码的问题

    最近在学习TomCat文件上传这一部分,由于文件上传必须要三个条件: 1.表单提交方式必须为Post 2.表单中需要有<input type="file">元素,还需要 ...

  4. 115 个 Java 面试题和答案——终极（上）

    目录 面向对象编程(OOP)常见的 Java 问题Java 线程Java 集合类垃圾收集器 面向对象编程(OOP) Java 是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开 ...

  5. CentOS 7 安装serverjre 9

    1.  首先去官网查询最新的jre的下载地址,然后用wget命令下载. 2. 创建安装目录 sudo mkdir -p /usr/local/java 3. 解压文件到安装目录 sudo tar -z ...

  6. windows平台安装maven

    Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 一.安装maven3.5.3 安装环境(条件):Windows10.jdk1.7+ 1.下载m ...

  7. 用ECMAScript4 ( ActionScript3) 实现Unity的热更新

    unity热更新是一个经久不衰的话题.除了最常见的lua之外,还有如JSBinding,C#等等.这里介绍一个使用ECMAScript4进行热更新的方案.它吸收了各家的优点,特色很鲜明. 项目地址: ...

  8. [LeetCode] Strange Printer 奇怪的打印机

    There is a strange printer with the following two special requirements: The printer can only print a ...

  9. 【Python3.6+Django2.0+Xadmin2.0系列教程之二】学生信息管理系统（入门篇）

    上一篇我们已经创建好了一个Xadmin的基础项目,现在我们将在此基础上构建一个同样很基础的学生信息管理系统. 一.创建模型 模型是表示我们的数据库表或集合类,并且其中所述类的每个属性是表或集合的字段, ...

  10. 前端性能监控系统 & 前端数据分析系统

    前端监控系统 目前已经上线,欢迎使用! 背景:应工作要求,需要整理出前端项目的报错信息,尝试过很多统计工具,如: 腾讯bugly.听云.OneApm.还有一个忘记名字的工具. 因为各种原因,如: 统计 ...