谈起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. 代码中特殊的注释技术——TODO、FIXME和XXX的用处

    本文内容概要: 代码中特殊的注释技术--TODO.FIXME和XXX的用处. 前言:今天在阅读Qt  Creator的源代码时,发现一些注释中有FIXME英文单词,用英文词典居然查不到其意义!实际上, ...

  2. wps的几个优点

    wps的几个优点 1.wps非常小巧,wps2011源文件38M,安装后160M,wps2010安装过后158M,工具栏.程序设置.模板可保存在一个文件里面,重装后用\WPS Office Perso ...

  3. for( unsigned int i=heapSize/2-1; i>=0; --i)

    unsigned int的表示 今天在写堆排序的时候遇到一个BUG void builMaxHeap( int *arr,unsigned int heapSize){ unsigned int i; ...

  4. as中的陷阱

    一.DisplayObject 1.有关width和height 对于一个对象A, 如果您设置了 width 属性,则 scaleX 属性会相应调整,并且会一直保存下来.尤其要注意的是如果A没有任何内 ...

  5. python 练习 9

    #!/usr/bin/python # -*- coding: UTF-8 -*- for i in range(1,5): for j in range(1,5): for k in range(1 ...

  6. [bootstrap] 基本css样式和组件

    一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...

  7. C#容易忽略點--包含多線程 委託事件等等--此頁面bug,編輯能查看全部內容

    委託事件 http://www.cnblogs.com/sdya/p/5217635.html 反射 1 创建用于反射使用的DLL 新建一个C#类库项目,拷贝源代码如下,编译生成DLL(假如DLL的文 ...

  8. socket头文件

    一. 三种类型的套接字:1.流式套接字(SOCKET_STREAM)    提供面向连接的可靠的数据传输服务.数据被看作是字节流,无长度限制.例如FTP协议就采用这种.2.数据报式套接字(SOCKET ...

  9. PHP Warning: ob_start() : output handler 'ob_gzhandler conflicts with 'zlib output compression'

    安装phpcms过程中,会遇到Warning:  ob_start() : output handler 'ob_gzhandler conflicts with 'zlib output compr ...

  10. hdu---(5038)Grade(胡搞)

    Grade Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Sub ...