javascript代碼 調試方法

来源:http://www.cnblogs.com/iflygofy/archive/2016/10/26/6000836.html
-Advertisement-
Play Games

你的代碼可能包含語法錯誤,邏輯錯誤,如果沒有調試工具,這些錯誤比較難於發現。 通常,如果 JavaScript 出現錯誤,是不會有提示信息,這樣你就無法找到代碼錯誤的位置。 在程式代碼中尋找錯誤叫做代碼調試。 JavaScript 調試工具 調試很難,但幸運的是,很多瀏覽器都內置了調試工具。 內置的 ...


你的代碼可能包含語法錯誤,邏輯錯誤,如果沒有調試工具,這些錯誤比較難於發現。

通常,如果 JavaScript 出現錯誤,是不會有提示信息,這樣你就無法找到代碼錯誤的位置。

在程式代碼中尋找錯誤叫做代碼調試。

JavaScript 調試工具

調試很難,但幸運的是,很多瀏覽器都內置了調試工具。

內置的調試工具可以開始或關閉,嚴重的錯誤信息會發送給用戶。

有了調試工具,我們就可以設置斷點 (代碼停止執行的位置), 且可以在代碼執行時檢測變數。

瀏覽器啟用調試工具一般是按下 F12 鍵,併在調試菜單中選擇 "Console" 。

1.alert方法

一般用來調試客戶端的javascript代碼。

JavaScript alert()函數的使用,alert--彈出消息對話框,並且alert消息對話框通常用於一些對用戶的提示信息。

alert--彈出消息對話框(對話框中有一個OK按鈕)

alert,中文"提醒"的意思

alert函數語法

alert(str);

alert函數提示框圖示:

     \

 

 

  

提示:消息對話框是由系統提供的,因此樣式字體在不同瀏覽器中可能不同。

提示:消息對話框是排它的,也就是在用戶點擊對話框的按鈕前,不能進行任何其它操作。

對簡單的代碼,可以逐行使用函數調試,找出問題所在。

2.console.log方法

如果瀏覽器支持調試,你可以使用 console.log() 方法在調試視窗上列印 JavaScript 值:

當在js代碼中調用Console.log方法時,相應的信息就會在控制臺中顯示。相對於alert方法,有三個優點:

1. 如參數為一個對象,則可在控制台查看所有屬性信息。

2. 類似C#中的string.Format功能,不需字元串拼接。

3. 無彈窗,即使不刪除,也不會影響頁面體驗。

3.設置斷點

在調試視窗中,你可以設置 JavaScript 代碼的斷點。

在每個斷點上,都會停止執行 JavaScript 代碼,以便於我們檢查 JavaScript 變數的值。

在檢查完畢後,可以重新執行代碼(如播放按鈕)。

4.debugger 關鍵字

用於停止執行 JavaScript,並調用調試函數。

這個關鍵字與在調試工具中設置斷點的效果是一樣的。

如果沒有調試可用,debugger 語句將無法工作。

開啟 debugger ,代碼在第三行前停止執行。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 通讀官方教程 (guide) 的基礎篇。不要用任何構建工具,就只用最簡單的腳本引入,把教程里的例子模仿一遍,理解用法。不推薦上來就直接用 vue-cli 構建項目,尤其是如果沒有 Node/Webpack 基礎。有了 Node 和 Webpack 的基礎,可以通過 vue-cli 來搭建基於 Web... ...
  • 之前一直聽朋友談起gulp,但沒有使用過,最近有機會接觸到,現在給大家分享下,不對的地方還請指正。我一直以為互相分享是學習的一種好方式。下麵進入正題: 首先來瞭解下gulp,最起碼要知道:我們為什麼要學它,它的優勢。gulp是前端開發過程中對代碼進行構建的工具,它不僅能對網站資源進行優化,在開發過程 ...
  • 關於Sass的基本用法 百度搜索一大推 本人是從阮一峰大神的筆記開始接觸這個玩意 傳送門 http://www.ruanyifeng.com/blog/2012/06/sass.html 來了攜程之後從代替之前做樣式的女孩子從寫css開始乾起 明天女孩度產假歸來 可以擁入js的懷抱 一片新的天地 工 ...
  • 開發項目中用到了artDialog.js,從而專門學習一下如何配置和使用。 一、artDialog是什麼 artDialog是一個精巧的web對話框組件,壓縮後只有十多KB,並且不依賴其他框架。 二、artDialog的使用 以下內容引用 http://www.2cto.com/kf/201303/ ...
  • 最近做一個項目,需要javascript動態插入樣式,結果以前的方法失效了!查了2個小時的原因竟然是自己手賤,這個最後再說! javascript插入樣式在前端開發中應用比較廣泛,特別是在修改前端表現和頁面換膚的時候。最近做的這個任務是用戶在別人的站點上點擊一個按鈕,就會在別的站點頁面下插入一個腳本 ...
  • 例如: JSON字元串:var str1 = '{ "name": "cxh", "sex": "man" }'; JSON對象:var str2 = { "name": "cxh", "sex": "man" }; 一、JSON字元串轉換為JSON對象 要使用上面的str1,必須使用下麵的方法先轉 ...
  • 1.超鏈接<a href="http://www.100sucai.com/" title="100素材網">Welcome</a> 等效於js代碼 window.location.href="http://www.100sucai.com/"; //在同當前視窗中打開視窗 2.超鏈接<a href ...
  • 網站開發時經常需要在某個頁面需要實現對大量圖片的瀏覽,如果考慮流量的話,大可以像pconline一樣每個頁面只顯示一張圖片,讓用戶每看一張圖片就需要重新下載一下整個頁面。不過,在web2.0時代,更多人願意用javascript來實現一個圖片瀏覽器,讓用戶無需等待過長的時間就能看到其他圖片。 知道了 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...