使用瀏覽器在JavaScript程式中的錯誤與除錯

2021-08-04 13:48:55 字數 3438 閱讀 8181

4.1 錯誤的概念與處理

電腦程式的錯誤有兩種:語法錯誤和邏輯錯誤。

比如alert拼寫錯誤,寫成了alter。

<script>

var

a = 3+4;

alert(a

)alter(a

);a

++;alert(a

);script>

執行結果只顯示了7,後面的結果沒有顯示,說明後面的**沒有執行。因為輸出7後遇到了語法錯誤,程式終止執行。

通過開發者工具可以看到遇到的語法錯誤及其說明

上例也進一步說明了解釋型語言的特點:翻譯一條,執行一條,遇到錯誤提前終止執行。

語法錯誤的發現方法:

(1)開發者工具的console視窗,能顯示錯誤及其說明

(2)try……catch 捕獲異常

4.2 除錯的原理、工具和方法

邏輯錯誤:程式在語法上沒有問題,但是實際執行結果和預期結果有出入。

<script>

/*報名參軍的年齡條件:17~24周歲*/

var

age 

= number(prompt("請問你的年齡是?"));

if(17

<=age

<=24)else

script>

當輸入年齡96或者3,都能報名參軍,結果顯然是錯誤的,但執行過程並沒有任何語法錯誤。

除錯的基本原理:

程式的執行是自動的,而且速度非常快,無法了解中間的執行過程。

但是幾乎所有的開發工具都提供了除錯的功能,可以去控制程式的執行節奏,從而可以讓開發者看清執行的過程。

怎麼去控制執行節奏呢

(1)設定斷點

開啟開發者工具

在sources頁開啟源**

在**左側(行號邊上)單擊即可在該處設定斷點

(2)單步執行(step)

每執行一步都會停下來,然後再繼續下一步

快捷鍵f10

控制節奏的目的是看清或者了解程式的執行過程,而不僅僅是結果。

怎麼看結果呢

(1)檢視程式執行的軌跡,也就是上圖中的指示即將要執行的**指示器,如果軌跡與預期不一致,說明上一步執行的**出現邏輯錯誤了。

(2)檢視變數、表示式的值

a.在watch視窗新增要檢視的變數或表示式,比方輸入age

此時就可以看到變數age的值

也可以通過在**中選中要檢視的變數或表示式,右鍵選擇新增到watch

在watch視窗就可以看到新增的變數或者表示式的值。

因為電腦程式的每一步執行的結果都是唯一的、可預期的;同時我們又可以通過上述手段控制程式的執行節奏並檢視程式執行的狀態(如軌跡、變數表示式的值),也就是可以看到實際執行結果。那麼將實際結果和預期結果對比,如果出現不一致,說明剛剛執行的那一步出現的錯誤,即定位錯誤

一旦定位錯誤,根據所學知識或經驗,應該就很容易分析出錯誤原因,從而找到解決方案。

再來除錯乙個程式。

var

a = prompt("請輸入第一邊長");

var

b = prompt("請輸入第二邊長");

var

c = prompt("請輸入第三邊長");

var

p = (a+b+c) / 2;//計算周長的一半

var

s =math.sqrt(p* (p-a) * (p-b) * (p-c));//海**式計算面積

alert(s);

設定斷點

執行程式,程式將在預定斷點位置停下來

檢視變數a,b,c的值

單步執行,檢視p的值

再檢視a+b+c的值

a+b+c的值並不是我們預期的6,而是「345」。原來是做了字串的拼接運算,而不是我們希望的加法,所以是數字型別問題。

解決方案就是將輸入的資料(字串)轉換為數值

再重新除錯程式,並檢視結果:

除錯工具不僅僅是定位錯誤的工具,也是乙個非常重要的學習工具。

因為除錯工具可以讓我們直觀地看到程式的執行軌跡以及執行狀態,有助於我們對於一些抽象直觀的理解。

在瀏覽器中使用GitHub

步驟1.建立儲存庫 1.點選頭像旁邊的加號,建立新倉庫 2.輸入倉庫名 3.倉庫說明 4.公共開源 私有 別看不見 收費 綜上所訴 1.點選create new file建立新檔案 或者點選那個鉛筆 或者點選藍色readme.md後再點選鉛筆 2.開始編輯 3.預覽修改 4.編輯完 成後 專案說明 ...

overflow hidden在各個瀏覽器中的應用

首先看看w3c的解釋 它的值可能為值描述 visible 預設值。內容不會被修剪,會呈現在元素框之外。hidden 內容會被修剪,並且其餘內容是不可見的。scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。auto 如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。inher...

使用瀏覽器Cookie

cookie是有netscape瀏覽器1.0版引入的。netscape 的開發人員發明了cookie。1.cookie 是如何工作的?web伺服器建立乙個cookie時,乙個附加的http頭部在瀏覽器顯示頁面時被傳送到瀏覽器。http頭部類似如下形式 set cookie message hello...