如何調試 JavaScript 代碼

一個關於如何使用調試來解決任何 JavaScript 問題的教程 調試是一個很好的技能,它可以幫助你解決 JavaScript 代碼中的每個問題。 每天早上我們起床,吃美味的早餐,坐在電腦前寫完美的代碼,這個夢想是理想的,不是嗎?但這只是一個夢想而已。 無論你有多好,無法寫出沒有缺陷的代碼。代碼總是有缺陷的,這是它的定義。 當你開始寫代碼時,你可能沒有見過或預料到錯誤。錯誤可能只有在你將程序發佈給用戶之後才會被發現,這是最糟糕的情況。 錯誤可能由你自己在測試程序時發現,甚至可能在某些事情正常運作時就突然出現故障,只因為你改變了一行代碼。 這些被稱為回歸錯誤。 作為開發人員,錯誤是我們日常工作的一部分,但我們的工作是盡可能地將它們減少到最低。 當你知道有錯誤時,你如何解決它呢? 嗯,最難的部分始終是確定錯誤發生在哪裡。 然後,第二個最困難的部分是找出為什麼會發生這個錯誤。 一旦你知道了上述所有問題的答案,解決錯誤通常就很容易了。 通常我們可以做兩件事來解決錯誤。 一種技術是非常基本的,涉及嘗試找出狀態(變量的內容)和程序流程的值,並將這些變量打印到日誌或程序的輸出中。 找出錯誤可能出現的地方 調試是一種對程序員活動非常核心的技能。 有時候我們盡力工作,但程序卻不能正常工作,例如,它崩潰了,只是運行得很慢,或者它打印了錯誤信息。 當你寫的程序不像你預期的那樣運行時,你會怎麼做? 你開始調試它。 第一步始終是觀察發生了什麼,並嘗試確定問題來自哪裡。 它是環境中的問題嗎? 它是你給程序的輸入中的問題嗎? 它是由於內存使用過多而導致的一次性崩潰嗎? 還是每次運行它都會發生? 這些都是在解決問題時開始朝著正確方向前進的重要信息。 一旦你對錯誤的來源有了一些想法,你就可以開始檢查該特定程式碼的部分了。 最簡單的調試方式,至少在工具方面而言,是讀出你所寫的代碼。大聲讀出來。 如果你讀的是一個字符串或一個數字,那麼聽起來沒有任何魔力。 然而,有時我們可以通過這種方式發現問題。 在這一步之後,就是使用一些工具的時候了。 你第一次接觸 alert() 和 console.log() 如果閱讀代碼對你來說毫無意義,那麼下一個合乎邏輯的步驟就是開始在代碼中添加幾行代碼,以幫助你找到問題所在。 在 JavaScript 前端代碼中,你通常會使用 alert() 和 console.log()。 考慮以下代碼行: const a = calculateA() const b = calculateB() const result = a + b 出於某種原因,我們不知道代碼的最終結果計算不正確,所以我們在計算結果之前添加 alert(a) 和 alert(b)。 當瀏覽器執行代碼時,它會打開兩個警告對話框: const a = calculateA() const b = calculateB() alert(a) alert(b) const result = a + b 如果你將 alert() 傳遞的是一個字符串或一個數字,這種方法是行得通的。...

如何讓瀏覽器中的頁面可編輯

瀏覽器中有一個特殊且相當神秘的模式,稱為設計模式(design mode)。 當您將頁面設定為設計模式時,您可以直接在瀏覽器頁面中編輯頁面內容,這對於測試某些原型或檢查新標題的外觀非常方便。 要如何啟用它?在開發者工具控制台中輸入以下指令: document.designMode = 'on' 啟用body元素上的contentEditable也可以達到同樣的效果,像這樣: document.body.contentEditable = true 您可以編輯文字,刪除文字,還可以拖曳圖片來重新定位它們。 要關閉設計模式,輸入以下指令: document.designMode = 'off' 幾乎所有瀏覽器都支援這個功能,包括IE。這功能已經存在很久了,但相當不被人所知。

學習 Web 平台的路線圖

Web 平台是一個令人驚嘆的 API、工具和語言的生態系統,如今比以往任何時候都更加強大。通過我的路線圖,通過簡單的教程學習 Web 平台。 Web 平台是一個令人驚嘆的 API、工具、語言的生態系統,如今比以往任何時候都更加強大。 在這個博客上,我寫了很多與 Web 平台相關的教程和文章。 本文旨在將它們組織起來,讓您可以更輕松地找到它們,並作為學習如何在 Web 平台上進行開發的路線圖。 瀏覽器 API 指南 首先深入研究 DOM,這是瀏覽器提供的最基本的 API。一旦熟悉了這個,可以查看與瀏覽器相關的其他重要 API。 DOM Selectors API XHR API Fetch API Channel Messaging API Cache API Service Workers Progressive Web Apps History API Push API Notifications API Console API CORS Web Workers requestAnimationFrame WebSockets WebRTC Speech Synthesis API SVG,一個令人驚嘆的圖像格式 學習 SVG 存儲 API Web 平台提供了 3 個基本的存儲 API:cookies、Web Storage 和 IndexedDB。瞭解它們的優點和缺點: IndexedDB Cookies Web Storage Web 開發者工具 如果沒有所提供的令人驚奇的瀏覽器開發者工具,我們開發者會完全迷失和恐懼。...