曾经的选择是使用火狐浏览器的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. python之路--day15--常用模块之logging模块

    常用模块 1 logging模块 日志级别:Noset (不设置) Debug---(调试信息)----也可用10表示 Info--(消息信息)----也可用20表示 Warning---(警告信息) ...

  2. php函数var_dump() 、print_r()、echo()

    var_dump() 能打印出类型 print_r() 只能打出值 echo() 是正常输出... 需要精确调试的时候用 var_dump(); 一般查看的时候用 print_r() 另外 , ech ...

  3. Python机器学习—导入各种数据的N种办法

    pandas 读取数据 一.导入一般的文件 1.read_csv(),用来读取CSV文件 官方文档是这么说的:Read CSV (comma-separated) file into DataFram ...

  4. LeetCode & Q35-Search Insert Position-Easy

    Array Binary Search Description: Given a sorted array and a target value, return the index if the ta ...

  5. Jenkins+maven+git配置

    1)         安装maven 如下图我已装好maven(这是我很早以前装的,安装教程大家可以百度一下,很容易安装的) 2)         安装git客户端 如下图所示,我也安装好了git客户 ...

  6. svn介绍和安装

      什么是SVN呢,作用是什么: SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS/CVS,它采取了分支管理系统,它的设计目标就是取代CVS.SVN就是用于多个人共同开 ...

  7. Python_fullstack_test1

    1.执行Python脚本的两种方式 使用交互式的带提示符的解释器或使用源文件 2.简述位.字节的关系 位是计算机中最小计量单位,用bit表示 字节是计算机中最小存储单位,用Byte表示 1字节=8位, ...

  8. Android：CheckBox控件

    1)ChexkBox继承自CompoundButton组件: 2)isChecked()--确定是否选中:setChecked(bool checked)--设置选中或取消选中: 3)监听事件:Com ...

  9. java 面向对象编程。。。。

    经过一周的学习(java),总结了许多,对java的理解,java的类型,运用,安装,基础语法,变量,常量,表达式,语句 java从C语言中继承了大量语言特性.java面向对象编程的基本特征,包括继承 ...

  10. [LeetCode] Couples Holding Hands 两两握手

    N couples sit in 2N seats arranged in a row and want to hold hands. We want to know the minimum numb ...