谈起JavaScript调试,大家可能想到的就是FireFox下的FireBug,这毫无疑问,FireBug基本已经成为JavaScript开发人员的必备工具。在本文中,将向大家介绍如何在IDEA下远程调试JavaScript,毕竟能在IDE工具中直接设置断点,进行调试,这还是非常诱人的。
       首先我们要给FireFox安装一个插件,该插件由IntelliJ IDEA的开发工程师开发,安装目录为%IDEA_HOME%/plugins/JavaScriptDebugger/firefox目录下,你只需拖动JBExtension.xpi文件到FireFox窗口即可完成安装。IDEA还会在调试JavaScript时自动安装,所以你不安装也不会有问题。

        接下来我们需要在IDEA中创建一个调试JavaScript的运行配置(run configuration),这样我们就可以启动JavaScript的调试器。这里要说明的是,你需要给相关的js设置网络URL,这样就可以在远程 JS和本地JS文件做好映射。

你点击Debug按钮后,IDEA就会打开一个FireFox,然后定位到你之前设定的URL地址,接下你在IDE工具中设定断点,当JS文件运行到断点时,就会被IDEA捕获,你就可以看到调试信息。

如果你不想为该URL进行远程调试,只需点击firefox中"Tools“菜单下的"JS Debugger"下的disconnect即可,这个时候,调试的断点就不再有效,可以正常运行程序啦。

总的来说,在IDE中调试JavaScript是非常诱人的,尽管FireBug已经非常优秀啦。IDE提供了众多的特性,如导航,代码提示等等,发现问题快速修复等,这些是FireBug所没有的,具体选择哪个方式,这里不做推荐,你自己看,不过你在做抉择之前,最好先了解一下这种模式。

IDEA调试javaScript的更多相关文章

  1. VS Code - Debugger for Chrome调试JavaScript的两种方式

    VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...

  2. chrome调试 JavaScript 脚本

    随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaSc ...

  3. chrome调试JavaScript脚本

    随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaSc ...

  4. 利用chrome调试JavaScript代码

    看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...

  5. IE、chrome、火狐中如何调试javascript脚本

    1.  IE中点击"F12",在弹出页面中调试javascript脚本 2. chrome中点击"F12",在弹出页面中调试javascript脚本 3.  火 ...

  6. 在IE中调试Javascript

    不管我们写代码的时候如何小心,都不可能完全避免程序中出现bug,这个时侯就需要我们在调试的时候找出错误,修改代码. Javascript是一门灵活的语言,灵活的语法和它解释执行的特性,使得Javasc ...

  7. 调试 JavaScript 脚本

    随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaSc ...

  8. 调试javascript

    Chrome 控制台 如何调试javascript 上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javasc ...

  9. Chrome 控制台 如何调试javascript

    上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1 ...

随机推荐

  1. Python类、模块、包的区别

    类 类的概念在许多语言中出现,很容易理解.它将数据和操作进行封装,以便将来的复用. 模块 模块,在Python可理解为对应于一个文件.在创建了一个脚本文件后,定义了某些函数和变量.你在其他需要这些功能 ...

  2. html5实现GIF动画!

     代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8"&g ...

  3. Mysql中的排序规则utf8_unicode_ci、utf8_general_ci的区别总结

    Mysql中utf8_general_ci与utf8_unicode_ci有什么区别呢?在编程语言中,通常用unicode对中文字符做处理,防止出现乱码,那么在MySQL里,为什么大家都使用utf8_ ...

  4. 转:内存区划分、内存分配、常量存储区、堆、栈、自由存储区、全局区[C++][内存管理][转载]

    内存区划分.内存分配.常量存储区.堆.栈.自由存储区.全局区[C++][内存管理][转载] 一. 在c中分为这几个存储区1.栈 - 由编译器自动分配释放2.堆 - 一般由程序员分配释放,若程序员不释放 ...

  5. IE浏览器GET传参后台乱码

    ie里面 get传递的字符串 为 gb2312  ,后台用的是utf-8类型  所以用 POST传递字符串到后端 否则进行js参数转码 encodeURI(""); 后端解码

  6. window下安装nodejs

    下载nodejs 去https://nodejs.org/en/download/下载nodejs,有.mis(安装版)和.exe(二进制版) .mis(安装版) 一般下载这个就行,简单方便,自带np ...

  7. const修饰指针

    关于const修饰指针的情况,一般分为如下4种情况: ; const int *a =&b; //情况1 int const *a =&b; //情况2 int* const a =& ...

  8. Spring3.1新特性

    一.Spring2.5之前,我们都是通过实现Controller接口或其实现来定义我们的处理器类.   二.Spring2.5引入注解式处理器支持,通过@Controller 和 @RequestMa ...

  9. [BI基础] 一些不得不了解的概念

    0.Hadoop hadoop主要是用来对海量数据进行存储和计算的. 它本身是一个分布式系统,核心由分布式文件系统hdfs,和分布式计算框架mapreduce组成,在存储和计算时能够发挥出集群中每台机 ...

  10. Qt之图形视图框架

    简述 图形视图(Graphics View)提供了一个平台,用于大量自定义2D图元的管理与交互,并提供了一个视图部件(view widget)来显示可以缩放和旋转的图元. 框架包括一个事件传播架构,支 ...