使用WebStorm进行javascript调试

1.关于javascript调试

曾经的选择是使用火狐浏览器的Firebug插件，具体的用法到时候在细说，这篇文章登场的是开发静态网页及javascript的利器--webstorm.

2.相关软件安装和配置

　　安装WebStorm
　　WebStorm官网：( https://www.jetbrains.com/webstorm/ )

　　安装Chrome和JetBrains IDE Support
　　JetBrains IDE Support的地址是：
https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji
　　不过一般都是被墙了，所以得FQ去安装插件了。

3.配置host

windows: C:\Windows\System32\drivers\etc

mac&linux:\etc\hosts

3、WebStorm调试JavaScript

1.WebStorm增加JavaScript调试选项
增加个TestJS的项目工程，直接选择Empty Project类型即可
然后自己增加相应的html和js文件
在工程的右上角那里，点那个下尖符号，弹出 Edit Configurations

点绿色的+号，然后选择JavaScript Debug

配置好相关路径就可以了

2.运行调试效果
点击那个绿色的甲虫，就可以看到实际的调试效果了。这个时候Chrome会有下面的提示

会自动切换回WebStorm的调试界面

时间： 2024-10-03 07:40:01

使用WebStorm进行javascript调试的相关文章

Firefox下javascript调试方法

前面博文谈了一下IE浏览器下javascript的调试方法,今天没事干就把火狐浏览器(Firefox)下的javascript调试方法也看了一下,记录在此,希望对大家有所帮助. 我们这次使用的代码页面为document获取对象博文中的按name属性获取对象的代码. <html> <head> <title>getElementsByName</title> </head> <body> <form id="form1&

javascript 调试使用console.table()

或许你已经习惯了console.log()来调试js,非常使用,但是今天微博看到console.table()调试javascript,和console.log()类似,主要区别在于: 主要用来输出对象和数组;更加直接的可视化,以表格形式展现;可以单独输出某个或某几个属性: var languages = { csharp: { name: "C#", paradigm: "object-oriented" }, fsharp: { name: "F#&q

HTML/CSS/Javascript调试入门(转)

推荐Chrome作为开发工具(FF可以使用FireBug,IE8和之后的版本也有自己的调试工具) 1.HTML的调试将鼠标放在任意元素上,右键Inspect Element,即可查看该元素的HTML内容.(也可以通过F12打开开发者工具) 效果如下在Elements面板中将鼠标放在任意元素上,HTML界面上对应的元素会被选中右击元素,可以直接修改或者是移除元素,修改后的元素效果会马上反应在页面上 2.CSS的调试在开发者工具的右侧面板可以找到对应的CSS调试框 Styles分类下可以看

selenium中javascript调试

之前写了使用js输入长文件的文章,有同事在使用时,发现竟然无法输入,也不知道是什么原因,且用的还是id方式. 在参考网文后,才发现是js写的有问题,现总结一下 javascript调试,在firefox中就自带有.打开如下: -------->勾选后,按f12就可以出来我们在控制台中输入脚本,发现id定位并不是我们要定位的框只有转变方式,用classname来定位,结果是我们想要的,输入文本试试输入成功

JavaScript调试技巧之断点调试

首先,在各个浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js.除此之外,Firefox还支持一些更为高级的断点调试.变量监视功能. 其他浏览器里,Opera.Chrome和Safari的调试功能也比较好用.Opera的DragonFly速度相对比较快,界面清爽,功能强大,但不如Safari等友好.相比来说,IE8的程序员

Javascript 调试利器 Firebug使用详解

Javascript 调试利器 Firebug使用详解有时候,为了更清楚方便的查看输出信息,我们可能需要将一些调试信息进行分组输出,那么可以使用console.group来对信息进行分组,在组信息输出完成后用console.groupEnd结束分组. 我们测试一下把刚才的4个输出作为一个分组输出,修改代码为: 复制代码代码如下: console.group('开始分组:'); console.debug('This is console.debug!'); console.info('Thi

你应该了解的5个JavaScript调试技巧

在某些情况下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你会发现它们的有用之处: 1. debugger; 正如我之前提到的,你可以使用“debugger;”语句在代码中加入强制断点. 需要断点条件吗?只需将它包装它在IF子句中: if (somethingHappens) { debugger; } 复制代码只需记住在上线前移除. 2. 当节点变化时断开有时DOM像有了自己的想法.当不可思议的变化发生时很难找到问题的根源. Chrome开发人员工有调试这个问题的超级有用技能.这就是所谓

【转】HTML, CSS和Javascript调试入门

转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html HTML, CSS和Javascript调试入门本文介绍一些入门的HTML,css和Javascript调试技巧. 希望能让初学者有所收获,少走一点弯路. 个人推荐Chrome作为开发工具(FF可以使用FireBug,IE8和之后的版本也有自己的调试工具) 1.HTML的调试将鼠标放在任意元素上,右键Inspect Element,即可查看该元素的HTML内

14招搞定JavaScript调试

14招搞定JavaScript调试译者按: 很多时候,大家可能只是依靠console.log来调试JavaScript代码,这样做的局限性不言而喻,这篇博客将教你几招实用的调试技巧. 原文: The 14 JavaScript debugging tips you probably didn't know) 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 掌握工具的使用方法可以极大提高解决问题的效率.尽管JavaScript以难以D