javascript如何執行調試

2020-12-16 php中文網

javascript中執行調試的方法有:使用console.log()方法,或者使用關鍵字「debugger」。

有時代碼可能會包含某些錯誤。而作為腳本語言,JavaScript無法在瀏覽器中顯示任何錯誤消息。但是,這些錯誤卻會影響輸出。找出這些錯誤的最佳做法就是調試代碼,下面就開始介紹具體內容,希望對你們有所幫助。

我們可以使用內置的Web瀏覽器調試器來輕鬆調試代碼,找出錯誤。而要執行調試,我們有兩種方法可以使用,只要任意選擇一種使用就行:

1、使用console.log()方法

2、使用關鍵字「debugger」

下面我們就來具體介紹這兩種方法:

使用console.log()方法

console.log()方法可以將結果顯示在瀏覽器的控制臺中。如果代碼中有任何錯誤,則會生成錯誤消息。

例:在控制臺輸入一項結果,查看輸出

x = 10;y = 15;z = x + y;console.log(z);console.log(a); //a沒有什麼定義,無法輸出,會出錯

輸出:

說明:要在瀏覽器上打開控制臺,需要按F12鍵;或者使用組合鍵:Ctrl+Shift+i。

使用「debugger」關鍵字

在調試中,通常我們會在代碼本身的內容中設置斷點來逐步檢查每行代碼。

調試器在debugger」關鍵字的位置上停止執行程序。然後,我們可以手動啟動執行流程。如果發生異常,則執行將在該特定行上再次停止。

輸出:

x = 10;y = 15;z = x + y;debugger;alert(z);alert(a);

輸出:

alert(z);會執行,輸出15,但alert(a);會出錯,報錯:

效果:

總結:以上就是本篇文章的全部內容,希望能對大家的學習有所幫助。

以上就是javascript如何執行調試的詳細內容,更多請關注php中文網其它相關文章!

相關焦點

  • 實用Javascript調試技巧分享
    見過太多同學調試Javascript只會用簡單的 console.log甚至 alert,看著真為他們捉雞。。
  • 你不知道的16條JavaScript調試技巧
    在console.log之後,調試器是我最喜歡的快速調試工具。如果放置調試器,在您的代碼行中,Chrome將在執行時自動在那裡停止,您甚至可以將其包裝在條件句中,因此它僅在需要時運行。有時,您要查看一組複雜的對象。您可以console.log它們並在列表中滾動,也可以使用console.table幫助器。它使您更輕鬆地查看正在處理的內容!
  • 14個你可能不知道的JavaScript調試技巧
    一起來看大多數技巧都適用於 Chrome 控制臺和 Firefox, 儘管還有很多其他的調試工具,但大部分也適用。1. debugger除了 console.log, debugger是我們最喜歡、快速且骯髒的調試工具。執行代碼後,Chrome 會在執行時自動停止。你甚至可以把它封裝成條件,只在需要時才運行。
  • 14款優秀的JavaScript調試工具大盤點
    不過,調試JavaScript對正在開發web開發人員而言可以說是一項相當痛苦又艱巨的任務。因此我們收集了一些最好的JavaScript調試工具,希望可以幫助你調試腳本,以實現更精確的結果。誠摯地希望這些我們推薦的工具能為你帶來方便,祝你編程愉快! 1.Json Formatter & Validator  JSON Formatter是用來協助調試的。
  • JavaScript 執行機制
    因為javascript是一門單線程語言,所以我們可以得出結論:看到這裡讀者要打人了:我難道不知道js是一行一行執行的?還用你說?我們真的要徹底弄明白javascript的執行機制了。1.關於javascriptjavascript是一門單線程語言,在最新的HTML5中提出了Web-Worker,但javascript是單線程這一核心仍未改變。所以一切javascript版的"多線程"都是用單線程模擬出來的,一切javascript多線程都是紙老虎!
  • 14 個你可能不知道的 JavaScript 調試技巧
    var animals = [    { animal: 'Horse', name: 'Henry', age: 43 },    { animal: 'Dog', name: 'Fred', age: 13 },    { animal: 'Cat', name: 'Frodo', age: 18 }];
  • 這10個實用的Javascript調試技巧,你知道嗎?
    因為大多數同學追求優雅而高效地寫代碼,卻忽略了如何優雅而高效地調試代碼,不得不說是有點「偏科」了。下面我就分享一些實用且聰明的調試技巧,希望能讓大家調試自己代碼的時候更加從容自信。其次,alert會阻塞UI和javascript的執行,必須點擊'OK'按鈕才能繼續,非常低效。所以,喜歡使用alert的同學可以改改這個習慣了。
  • 這一次,徹底弄懂 JavaScript 執行機制
    因為javascript是一門單線程語言,所以我們可以得出結論:javascript是按照語句出現的順序執行的看到這裡讀者要打人了:我難道不知道js是一行一行執行的?還用你說?我們真的要徹底弄明白javascript的執行機制了。1.關於javascriptjavascript是一門單線程語言,在最新的HTML5中提出了Web-Worker,但javascript是單線程這一核心仍未改變。
  • JavaScript 基礎語法
    3 JavaScript文件位置很重要,網頁自上而下進行代碼的執行,如果將JavaScript放置在head當中,又希望不發生錯誤,則需要使用到window.onload事件(後面的文章當中會講解到事件相關的知識)或者將JavaScript文件放置在所有標籤之後,能夠保證加載完成html結構之後再執行JavaScript內容。
  • 細說javascript常用的兩種循環,讓重複執行的代碼遠離你的困惑
    如何額,有沒有那麼一點點成就感,想不想繼續跟小編混下去啊?後面的內容越來越精彩哦,只要大家堅持,一天積累小點點,終有出頭日,鐵棒也能磨成針。大家說是不是呢!好了,閒話少說,咱們開始吧!今天小編給大家帶來的javascript循環語句。考考你:在開始之前,小編有一個小小的問題,不知道大家是否還記得咱們昨天講過的判斷語句,它與循環語句有什麼區別?
  • JavaScript入門教程
    起源javascript前身叫做livescript,sun公司推出java,netspace公司引進java的概念,重新設計livescript,並更名javascript。發明者,布蘭登.艾克,表單驗證原先要經過伺服器,伺服器壓力大,等待時間長,js僅在客戶端就可完成。是什麼是一種腳本語言,是一種輕量級的程式語言。
  • 一些你不知道的JavaScript Console調試命令
    var languages = { csharp: { name: "C#", paradigm: "object-oriented" }, fsharp: { name: "F#", paradigm: "functional" }};console.table(languages);注*之前曾介紹過,更多詳細信息請參考: 高級JavaScript調試
  • JavaScript是什麼
    面向過程的思想----C語言【指針】面向對象的思想就是只需要知道開始和結束位置就可以,至於中間是如何完成的不需要關注。開始和結束位置就是對象。面向對象的思想—java、 C#腳本—寫好的程序不需要中間轉換,就能立即在運行環境中運行。javaScript,SQL為html網頁提供動態效果【特效】。
  • 從setTimeout(fn,0)函數剖析JavaScript的執行機制
    即 GUI 渲染線程與 JS 引擎是互斥的,當JS引擎執行時GUI線程會被掛起,GUI 更新會被保存在一個隊列中等到 JS 引擎空閒時立即被執行。javascript 引擎線程:也可以稱為 JS 內核,主要負責處理 Javascript 腳本程序,例如 V8 引擎。
  • 9 個讓 JavaScript 調試更簡單的 Console 命令
    lt;html> <head>     <title>常用console命令</title>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body>     <script type="text/javascript
  • JavaScript自學記錄:錯誤處理與調試
    第17章 錯誤處理與調試17.1 瀏覽器報告的錯誤需要打開JavaScript報告功能17.2 錯誤處理17.2.1 trt-catch語句try{// 可能會導致錯誤的代碼 }catch (error) { // 在錯誤發生時處理代碼 }finally { // 無論上面哪句執行,都接著執行finally代碼
  • Javascript 生成器
    在 javascript 中,如果想要使用生成器,則需要: 定義特殊的生成器函數 調用該函數創建一個生成器對象 在循環中使用該生成器對象,或直接調用其 方法 我們以下面這個簡單的程序做為起點,並執行以下每個步驟:
  • JavaScript的反調試技術(下篇)
    在本文的上篇中,我們為讀者介紹了與JavaScript反調試有關的一些技巧,其中包括函數重定義、斷點、時間差異、DevTools檢測和執行流程完整性的隱式控制等,接下來,我們將為讀者介紹更多的反調試技巧。 0x06  代碼完整性的隱式控制在前面的「0x01函數重定義」部分,我們提到可以在JavaScript中使用toString()方法檢索函數的代碼。
  • 由淺入深學習JavaScript Debug技巧
    我常常看到不少開發者不懂如何Debug JavaScript代碼,因此決定寫一篇博客為初學者介紹如何Debug。我希望這篇文章可以提供一些有用的信息。我嘗試在本文講述很多內容,所以有些部分並沒有講得很細。在開始之前,做一些基本的準備:注意:1. 你最好打開兩個窗口,一邊看一邊操作來學習;2.
  • JavaScript 中 Eval 函數的前世今生,執行代碼字符串
    Eval:執行代碼字符串內建函數 eval 允許執行一個代碼字符串。eval('1+1');alert(value); // 2let value = eval('let i = 0; ++i');alert(value); // 1eval 內的代碼在當前詞法環境(lexical environment)中執行