近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前端開發工程師！