App下載

JavaScript怎么調(diào)試?怎么調(diào)試的方法分享!

猿友 2021-07-03 14:37:05 瀏覽數(shù) (2422)
反饋

想必很多小伙伴都有過這樣的經(jīng)歷,在前端開發(fā)的過程中我們會遇到許多的調(diào)試之類的問題,那么今天我們就來說說有關(guān)于“JavaScript怎么調(diào)試?”這個問題。下面是小編整的相關(guān)內(nèi)容,希望對大家的學(xué)習(xí)和來了解有所幫助!

對于這個問題的話我們在沒有調(diào)試器的情況下寫JavaScript是有難度的,這樣子我們在書寫代碼的時候會很多的問題,語法錯誤、邏輯錯誤這些都是比較難以診斷的。一般我們在書寫代碼有問題的時候不會發(fā)生任何事情也不會給我們錯誤的消息提示。


1、console.log()方法:

我們來看看下面這個代碼:

<html>
<body>

<h1>我的第一張網(wǎng)頁</h1>

<p>使用F12在瀏覽器(Chrome、IE、Firefox)中激活調(diào)試,然后在調(diào)試器菜單中選擇“控制臺”。</p>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

對于這個方法我們還是需要瀏覽器支持的,那么我們就可以使用這個方法來查看我們頁面中JavaScript的值,一般都可以在瀏覽器中點擊F12進行打開我們的控制器進行調(diào)試。


2、設(shè)置斷點

我們可以通過在調(diào)試窗口中的JavaScript代碼中設(shè)置斷點,而且在每個斷點中,JavaScript將停止執(zhí)行可以方便我們查詢JavaScript的值,而且在查詢之后還可以恢復(fù)我們代碼的執(zhí)行。


3、debugger關(guān)鍵詞

在使用這個方法的時候是會停止JavaScript的執(zhí)行,還會進行調(diào)用我們的調(diào)試函數(shù),這就和我們的調(diào)試器中的設(shè)置斷點的功能時一樣的了,我們可以看看下面這個代碼:

<html>
<head>
</head>

<body>

<p id="demo"></p>

<p>打開調(diào)試器后,下面的代碼應(yīng)該在執(zhí)行第三行之前停止執(zhí)行。</p>

<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

當(dāng)我們在進行使用這個方法的時候,上面的代碼中會在執(zhí)行第三行之前停止運行。


4、主流瀏覽器的調(diào)試工具

Chrome

打開瀏覽器 ,從菜單中選擇工具 ,從工具中選擇開發(fā)者工具,最后,選擇控制臺。

 Firefox Firebug 

打開瀏覽器,前往網(wǎng)頁:http://www.getfirebug.com ,根據(jù)如下指令:如何安裝 Firebug。

Internet Explorer

打開瀏覽器 ,從菜單選擇工具,從工具選擇開發(fā)者工具 最后,選擇控制臺。

 Opera 

打開瀏覽器,請前往網(wǎng)頁:http://dev.opera.com,根據(jù)如下指令:如何安裝 Firebug Lite。

 Safari Develop Menu

點擊 Safari 菜單,偏好設(shè)置,高級,之后我們在通過選中“在菜單欄中啟用開發(fā)菜單”,當(dāng)菜單中出現(xiàn)新選項“開發(fā)”時,選擇“顯示錯誤控制臺”。 


總結(jié):

以上就是有關(guān)于“JavaScript怎么調(diào)試?”的問題,如果你有什么更好的方法也可以和大家一同分享,更多有關(guān)于JavaScript這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進行學(xué)習(xí)和了解。當(dāng)然對于我們說到的有關(guān)于JavaScript調(diào)試的話我們還是要考慮實際的運用情況來決定的。



0 人點贊