Posts Tagged With: Chrome

[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: 工作點滴, 技術分享 | 標籤: | 發表留言

[Chrome] 模擬行動裝置瀏覽器


話說,去年 10 月就在喊,Chrome 會在去年 12 月放出 低耗能 的正式版,終於在前兩天放出來了,紀念一下今天更新 Chrome ,就來看看工作利器,模擬行動裝置瀏覽器的操作步驟。

Chrome 57省電有一套,將背景分頁CPU使用率限制在1%內

選 Chrome 是因為夠直覺,但最重要一點是虛擬機沒法比的,就是 桌面版 Chrome 內建的開發工具,可以方便針對 javascript / css / html 語法除錯。

直接上 Chrome 57 的螢幕截圖:

從右上角 設定符號 展開選單,點選 [開發人員工具]

開發人員工具

開發人員工具

在開發工具 展開設定選單,點選 [Settings]

設定

設定

勾選需要模擬的內建裝置,或自己新增自訂裝置

新增自訂裝置

新增自訂裝置

開發工具在工具列點選 切換網頁為 裝置模擬畫面

切換網頁為裝置模擬畫面

切換網頁為裝置模擬畫面

選擇要模擬的行動裝置,這邊以 Microsoft Lumia 950 為例。

選擇模擬裝置

選擇模擬裝置

從工具列可以修改長、寬 (預設裝置),若已選定模擬裝置,只能選擇縮放比例跟轉向,部分裝置不提供轉向功能。

轉為橫向

轉為橫向

操作時,可看到一個大大的圓圈,是滑鼠模擬手指點選的中大圓形。

滑鼠模擬手點為中大圓形

滑鼠模擬手點為中大圓形

IE 11 雖然也有簡單的模擬功能,但是沒有這麼視覺化,Chrome 桌面版在桌面狀態下不支援 viewport 設定及 SVG 縮放,但是在行動裝置模擬狀態時則支援。

紀念一下 Chrome 節電 66%~

Categories: 電腦和網際網路, 行動裝置, 工作點滴 | 標籤: | 1 則迴響

在 WordPress.com 建立免費網站或網誌.

%d 位部落客按了讚: