關於webhtmljs調試的信息

本文目錄一覽：

• 1、如何調試html網頁中的js代碼
• 2、Android webview加載的頁面怎樣調試JS
• 3、dreamweaver里如何調試javascript代碼
• 4、webstorm怎麼運行調試html
• 5、如何進行html調試和js腳本調試
• 6、怎麼在調試工具里調試html代碼

如何調試html網頁中的js代碼

以谷歌瀏覽器Chrome為例（火狐類似），說下前端打「斷點」：

一、按F12快捷鍵打開Chrome控制台，點擊「Sources」選項卡，如圖：

二、刷新當前網頁，代碼執行到「斷點」處會停住，如上圖藍色區域；

三、按F8快捷鍵可以在不同的斷點之間切換、按F10快捷鍵程序代碼會一步步執行，這樣就能很方便定位到錯誤區域，排查錯誤。

說明：火狐瀏覽器的操作方法和谷歌類似，當然界面略有不同。

Android webview加載的頁面怎樣調試JS

通過本地的webview打開腳本頁面。

調用步驟

1、設置webview支持腳本

webSettings.setJavaScriptEnabled(true);2、打開腳本頁面

mWebView.loadUrl(“”);//這裡打開該app的asset目錄下的demo.html，裏面含有wave函數腳本3、調用腳本

mWebView.loadUrl(“javascript:wave()”);//調用打開頁面中的wave函數

dreamweaver里如何調試javascript代碼

目前，常用的瀏覽器IE、Chrome、Firefox都有相應的腳本調試功能。我們先來看IE的：

1、在F12開發人員工具中進行調試

打開IE瀏覽器，按下F12鍵，就會打開開發人員工具，這是IE內置的開發人員開發工具，方便開發人員對HTML、CSS、Javascript等網頁資源進行跟蹤調試使用的。

如果你打開的時候沒有固定在網頁底部，可以點擊右上角菜單欄中的按鈕來完成。

我們看到在這個工具窗口裏面有幾個標籤頁，分別是：HTML、CSS、控制台、腳本、探查器和網絡，點開每一個標籤，可以執行相應的任務。

在HTML標籤窗口中，工具欄中的按鈕所執行的操作如下圖：

CSS標籤是用來查看樣式的；控制台顯示網頁中JS的各種輸出信息，包括錯誤信息、用戶日誌等；打開腳本標籤頁，這裏面才是我們想要的內容。

我在圖中用黃色矩形選中連個控件，左側的下拉列表用來選擇文件，右側的按鈕用來啟動調試。當點擊啟動調試後，調試程序會將窗口最大化，我們在選中的文件中找到需要調試的位置，點擊左側邊欄添加斷點即可進行調試。

當有程序運行到我們的斷點處時，就可以進行調試了：

在這裡，我們可以使用快捷鍵進行操作，常用的快捷鍵如下：

F9：添加/移除 斷點

F10：逐過程，即跳過該語句中的方法、表達式等

F11：逐語句調試，即單步調試，會跳入方法、表達式，進行逐語句的跟蹤調試

在執行過程中，如果我們要執行即時的代碼，我們就需要在右側的窗格中輸入代碼，按回車即可：

如果要執行多行代碼，點擊運行按鈕右側的雙箭頭，就會打開多行模式。我就不再截圖片了。

這種直接在瀏覽器中調試的方法同樣適用於Google瀏覽器Chrome和FireFox FireDebug，只不過在細枝末葉上面有些不同罷了，主體的功能都是一樣的。

按F12鍵進入開發者工具，可以查看源代碼、樣式和js：

點擊Scripts按鈕，可以打開這個調試窗口，裏面包含了網頁中腳本文件源碼，點擊左側的按鈕可以打開選擇文件的側窗口。

2、使用debugger關鍵字進行調試

這種方法很簡單，我們只需要在進行調試的地方加入debugger關鍵字，然後當瀏覽器運行到這個關鍵字的時候，就會中斷：

設置以後就可以使用debugger關鍵字進行調試了；進過這樣的設置，我們還可以捕獲到意外的錯誤，進行跟蹤調試。

webstorm怎麼運行調試html

需要先配置一個調試的服務器，如果會需要安裝對應的瀏覽器插件配合使用

1. 首先要安裝WebStrom以及在Chrome瀏覽器里配置好Live Edit插件。

2. 運行WebStrom，創建一個web project。

3. 修改index.html文件如下：

!DOCTYPE html

html

body

p

JavaScript 能夠直接寫入 HTML 輸出流中：

/p

script

cars=[“BMW”,”Volvo”,”Saab”,”Ford”];

for (var i=0;icars.length;i++)

{

document.write(cars[i] + “br”);

}

/script

p

您只能在 HTML 輸出流中使用 strongdocument.write/strong。

如果您在文檔已加載後使用它（比如在函數中），會覆蓋整個文檔。

/p

/body

/html

4. 設置斷點，選擇index.html文件，從右鍵菜單打開debug。

如何進行html調試和js腳本調試

進行html調試和js腳本調試的方法：

1、在chrome中打開開發者工具，打開方式如下圖，也可以使用快捷鍵F12來打開。

2、找到一個叫做「Sources」,點擊它

3、可以在左側側欄的序號那些位置點擊一下就設置成斷點，當你要執行某個函數的時候瀏覽器就會自動進入調試模式了

怎麼在調試工具里調試html代碼

1、在工具-Internet選項-高級，去掉「禁用腳步調試（Internet Explorer）」項的勾選。

2、去掉「顯示友好http錯誤信息」項的勾選。最後點擊應用，確定按鈕。

3、預覽表單，當要執行的js程序出現錯誤時，瀏覽器會給出提示。

4、在給出的錯誤提示窗口中，選擇「是（Y）」按鈕，進入IE瀏覽器自帶的開發人員工具腳本調試界面，

5、根據JS調試信息可以知道，當前JS報錯是由於沒有找到指定對象「dat」而導致的。我們需要在表單設計器中，修改JS程序並保存。因演示效果的需要，在本例中是沒有設置id值為dat的單行輸入框控件的，本例中第二個單行輸入框控件的id值是data2。修改後的JS代碼，

6、將其改成值data2後，再進行測試不會出現JS報錯信息，程序得以正常執行。

河南新華網絡運營協會