曾经的选择是使用火狐浏览器的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. 纯CSS垂直居中的四种解决方案

    总结了几种解决方法 但也不是说除了我说的就没有其他方法了 第一个.利用flex布局 代码: 效果: 第二个.利用transform 的 translate属性 代码: 效果: 第三个.使用伪类::af ...

  2. JAVA_SE基础——26.[深入解析]局部变量与成员变量的区别

    黑马程序员入学blog ... 如果这章节很难懂的话应该返回去先看  JAVA_SE基础--10.变量的作用域 定义的位置上区别: 1. 成员变量是定义在方法之外,类之内的. 2. 局部变量是定义在方 ...

  3. JAVA_SE基础——19.数组的定义

    数组是一组相关数据的集合,数组按照使用可以分为一维数组.二维数组.多维数组 本章先讲一维数组 不同点: 不使用数组定义100个整形变量:int1,int2,int3;;;;;; 使用数组定义 int ...

  4. nodeJS基于smtp发邮件

    邮件的协议smtp是tcp/ip族中的一个协议,所以我们这次考虑使用net模块来发送邮件. const net = require('net') const assert = require('ass ...

  5. 第二章 JavaScript核心语法

    第二章   avaScript核心语法 一.变量的声明和赋值 JavaScript是一种弱类型语言,没有明确的数据类型,也就是在声明变量时不需要指定数据类型,变量的类型由赋给变量的值决定. 在Java ...

  6. 扩展Microsoft Graph数据结构 - 架构扩展

    前言 此前我有一篇 文章 讲解了Microsoft Graph的一种数据扩展技术-- 开发扩展(Open Extensions),它可以实现在支持的对象(例如用户,组等)上面附加任意的数据.但开放扩展 ...

  7. big_menu菜单设置

    1.页面 <script> $(function(){ $('.subnav .content-menu .on').after('<a class="add fb&quo ...

  8. gradle入门（1-7）eclipse和gradle集成插件的安装和使用

    一.安装gradle插件:buildship 1.安装插件 gradle默认的本地缓存库在c盘user目录下的.gradle文件夹下,安装好gradle后,可以添加环境变量GRADLE_USER_HO ...

  9. 使用Java High Level REST Client操作elasticsearch

    Java高级别REST客户端(The Java High Level REST Client)以后简称高级客户端,内部仍然是基于低级客户端.它提供了更多的API,接受请求对象作为参数并返回响应对象,由 ...

  10. Mysql启动时提示：Another MySQL daemon already running with the same unix socket.

    场景:vmvare虚拟机.centos7.mysql5.7 解决: mv /var/lib/mysql/mysql.sock /var/lib/mysql/mysql.sock.bak 参考: htt ...