Posts Tagged With: runner

[Web] 前端 JavaScript 開發與除錯


前幾天,我針對一個 VBScript for IE 升級到 JavaScript 的網頁加入新功能除錯,由於網頁很亂,所以我考慮用 Visual Studio Code 的 console.log 來除錯,但不知道是不是因為我都用可攜版 (免安裝版) ,我的 JavaScript Runner 跑起來不正常,無法用來除錯,所以我就考慮用網頁來除錯器。

首先先搜尋了一些 OnLine 的 JavaScript ,包含 w3school ,但都不是十分滿意,所以決定自己來寫一個簡單除錯器:

JavaScript 執行器:http://www.tlcheng.tk/Tools/Runner/Runner.htm

IE11 預設執行畫面

畫面預設分幾個區塊,用一個 HelloScript 程式碼作為預設功能展示,點選 [執行] 按鈕,會跑 eval(程式碼 + 執行指令) 送到 輸出,執行指令有點像 IDE 的即時運算視窗。

所以當點選 [執行] 按鈕時,會跑藍色線,依據執行指令 HelloScript 呼叫原始碼 HelloScript ,這也表示原始碼可以有一些無關的程式碼在那,這樣有助於將 .js 檔案內容直接複製進來測試。

在原始碼 HelloScript 使用了常見三個輸出,訊息盒 (alert)、綠線是前端網頁 (使用 divOutput)、紅線是輸出 (函數回傳),輸出結果如下。

訊息盒輸出
網頁及回傳輸出

當 JavaScript 發生錯誤時,會把錯誤碼、錯誤訊息、堆疊訊息送到 [輸出],例如故意在 [執行命令] 把函數名寫錯。

常用的 console.log 可正常輸出到瀏覽器開發工具的主控台。

IE11 console.log 測試
IE11 開發工具輸出到主控台
新的 Edge console.log 測試
新的 Edge 開發工具輸出到主控台
Chrome console.log 測試
Chrome 開發工具輸出到主控台

把 StrTools.js 內容全部貼到 [程式碼],測試瀏覽器的開發工具是否能正常除錯。

貼入 js 檔案內容進行測試
IE11 開發工具可針對貼入程式碼除錯
新 Edge 開發工具可針對貼入程式碼除錯
Chrome 開發工具可針對貼入程式碼除錯

完成了除錯器開發後,我當然找到我的問題,但這是一個很悲傷的故事。

new Date(1899, 12, 30); // 回傳 1900/01/30

一般直覺以為,上面的物件是 1899/12/30 ,但是 JavaScript 是 1900/01/30 ,因為 Month 引數是 0 ~ 11 ,不是 1 ~ 12 啊~~~ 我回翻我所有的原始碼發現,我在 StrTools.js 這個公用函數中,2018 以前的版本都有在 Month 處 加減 1,不知道何時忘了,這個事件必須記錄下來,以警惕自身。

微軟 JavaScript 的線上手冊

Categories: 工作點滴, 技術分享 | 標籤: | 發表留言

在WordPress.com寫網誌.

%d 位部落客按了讚: