近HTML5很火,而且大家都在用WebStorm开发工具,但是有个问题是我们写JavaScript怎么像其他编辑器那样进行断点调试呢,今天就带大家来配置一下,让你的WebStorm如同飞一般的感觉。

• 1.断点调试需要浏览器添加支持的插件,以Chrome浏览器为例,如果怕麻烦的同学可以直接点击下面的连接为Chrome添加插件

  https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji

  ps:需要翻墙哦

• 2.如果你记不住的话,直接看图

• 3.点击获取更多扩展程序

4.搜索

• JetBrains IDE Support

• 5.然后添加

6.接下来在你的Chrmoe的右上角就能看到一个 JB了

• 7.然后配置 配置完成之后要点击 Apply

• 8.接下来设置默认浏览器为Chrome这一步很关键,因为调试的浏览器只会启动默认浏览器

• 9.开始调试

  打开webStrom,创建一份工程,写javaScript代码

  注意这里调试的只是javaScript

• 10.点击断点,在js代码前面点击,当代码执行的时候就会在这里停下,下面的代码就不执行了

• 11.然后在这个工程的HTML文件上右键

• 12.接下来你就会看到断点调试后的界面

  更多精彩更多交流，请登录bbs.520it.com。

HTML5已经成为当今世界的一个必然组成部分。由于World Wide Web万维网是使用超文本标记语言来架构和呈现的，于是HTML5成为了最流行的编程语言之一。随着网络的不断扩张，Web开发人员非常有必要拥有最新的HTML5工具，用于创建动态和交互式的Web应用程序和网页。下面这些就是你应该熟悉且掌握的HTML5工具。跟着千锋武汉HTML5培训小编一起看看吧！

1、Google Web Toolkit

Google Web Toolkit是现在大家还不熟悉的工具之一，主要用于开发浏览器应用的一个工具，不过库中支持很多【HTML5】的功能，包括对客户端，或者是web存储的支持，都可以实现。

2、JetBrains WebStorm

大家需要创建HTML文档时可获得对【HTML5】文件的支持，现在的运用很多，比如砍伐者键入，使用者可以在【chrome】浏览器中及时的预览【HTML】的文档很方便。

3、Visual Studio 2010 SP1

微软的Visual Studio 2010 SP1中提供了IntelliSense这个项目，也就是说追加了针对HTML5的一些元素，总体使用起来还是比较好的，但是我们要结合ddhu的一些实用工具。

4、Dojo Foundation Maqetta

Dojo Foundation Maqetta是一个不错的选择，这款是工具是来自于IBM项目之一，Dojo Foundation Maqetta是为桌面和移动设备开发HTML5应用的开源工具，浏览器即可使用。

5、Sencha Touch2

Sencha Touch2是移动应用框架的一种，可以当做一个重要Sencha的HTML5平台，使用者可以用它开发面向iOS进行制作和使用，也可以Android和Blackberry、Kindle Fire使用。

6、Sencha

Sencha这款工具的主要定位是HTML5的可视化开发研究，一般来说开发团队可以在一个任务，然后做一个集成的环境，然后在这个环境中完成应用的设计和开发，以及需要的部署。

7、Adobe ColdFusion

这款工具主要是用来开发企业web程序的一个技术，通过websockets和互动表单以及视频等来做出HTML5技术，创建一种用户体验。

8、Adobe Dreamweaver CS6

作为一个web端口的一种设计软件，这款工具提供了对HTML网站和移动程序的可视化编辑界面，整体来说使用也是比较方便。

以上就是常见的一些HTML5开发工具。要掌握如此之多的HTML5知识，光靠自学肯定是有难度的，可以考虑去HTML5培训机构进行学习。所以，赶快抓紧时间来学HTML5开发吧，成为一名全栈型的HTML5前端开发工程师！