Posts Tagged With: Edge

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

[Edge] 關閉 89 版新增快速啟動


這周 Edge 配合 Chrome 89 版一起升級,新的 89 版號稱

  1. 減少 Edge 啟動時間
  2. 減少 Edge CPU 及 RAM 的浪費

我家裡電腦基本上是不關機,利用 Win10 專業版的 IIS 放以前寫的網站,公司電腦則是每天下班時會關機。

所以當我 Edge 全關的時候,在家裡電腦會是這個樣子:

關閉 Edge 後一堆卡在電腦裡

關閉 Edge 後一堆卡在電腦裡

我個人很不習慣這樣。

現在很多網頁用 AJAX 或 WebSocket API 背景通訊,如果程式沒寫好,就會發生關掉瀏覽器時,背景還卡在通訊關不掉,我常常在 Facebook 網頁碰到。

所以我一直習慣每天睡前關閉瀏覽器後,會看工作管理員是否確認全部被關閉,這個習慣也延伸到 Outlook ,若是重啟 Outlook ,我一定會檢查工作管理員的 Outlook 是否完全被關閉,舊版的 hotmail 的外掛就常常會造成 Outlook 卡在記憶體裡面,如果 Outlook 沒有完全關閉,重啟是沒用的。

找了一下,預設設定變成下圖:

Edge v89 預設自動執行

Edge v89 預設自動執行

把啟動加速關閉,就可以關掉 Edge 時,完全關閉:

關閉啟動加速

關閉啟動加速

 

為了比較效果,我公司電腦特意沒動,反正每天關機都能確保記憶體正確被釋放,不用人工檢查。不過經過一周過去,我對於沒關的沒啥感覺,可能是現在電腦速度都太快,第一次啟動 Edge 所減少的時間可以忽略,所以不是人類能感受的。

所以我個人是偏好還是關掉好,為了快速啟動,耗個 2 ~ 300 MB 的記憶體不知道要幹嘛。

 

Categories: 技術分享 | 標籤: | 發表留言

[Edge] Windows Update 後 IE 捷徑自動更新為 Edge


公司在 2012 年導入鼎新的 ERP ,當時的電子簽核 Easyflow 是使用 ActiveX 寫的,還綁在 IE (Internet Explorer) 上,公司打算完成上櫃後再更新 ERP ,避免會計流程變更影響上櫃重新審查。

IE 被各大公司拋棄是不爭的事實,也沒打算替他平反,平常同事都使用其他瀏覽器上網,但是上電子簽核,還是得用 IE ,因此 IT 幫同事設定電腦時,會在 Win10 下方的開始工具列釘選 IE ,並且把 Easyflow 的捷徑,從 IE 網址列拖到桌面,以便方便使用 IE 開啟電子簽核。

不知道是哪個 Windows Update 搞的鬼,二月有零星個案,三月有十幾個個案,都是開始工具列、桌面捷徑全部被改為 Edge 。

開啟桌面捷徑的內容,其連結已經被改變,所以不管怎樣操作,都會先開 IE 再自動轉 Edge ,很難搞。

比較簡單的做法:

用檔案總管開啟以下位置檔案:C:\Program Files\Internet Explorer\iexplore.exe

等到 IE 開啟後,重新釘選到開始工具列,並且連上公司電子簽核後,就可以重新使用 IE 了。

我另外調整了瀏覽器設定再繼續觀察。

Edge 與 IE 預設行為

Edge 與 IE 預設行為

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

[Win10] Edge 在更新到 Win10 20H2 後使用 alt-tab 會同時呈現


我個人用 Windows 很多年了,老用戶就習慣使用熱鍵,我在切換視窗時,常常用 alt-tab。

例如下圖:

Alt-Tab 預覽視窗

Alt-Tab 預覽視窗

在 Win10 2004 (包含舊版的 OS) 之前,Edge 多頁籤會只有一個視窗,如果有特別要持續使用的網頁,可以拖出來變成獨立視窗,就可以在 Alt-Tab 單獨選擇。

但到了 Win10 20H2 以後,Edge 預設會如上,即使在同一視窗不同頁籤,也會跑出一堆視窗,這樣在工作時就不方便切換,例如在 Office 與 Edge 網頁查詢結果中切換。

好在微軟沒把功能寫死,可以關閉,不然真的想揍人了…

所有設定 > 系統 > 多工

切換 Edge 在 Alt-Tab 下的顯示模式

切換 Edge 在 Alt-Tab 下的顯示模式

將 Alt-Tab 設定 為 僅限開啟視窗 ,就可以恢復原來的模式了。

媽的,微軟真的常會沒事找事…

 

Categories: 工作點滴 | 標籤: | 1 則迴響

[H5] 讓 WebBrowser Control 直接相容 HTML5 網頁


讓 WebBrowser Control 直接相容 HTML5 網頁

利用 Google 搜尋 WebBrowser Control HTML5

https://www.google.com.tw/#q=WebBrowser+Control+HTML5

可以找出很多文章,關於強制讓 WebBrowser Control 以 HTML5 模擬環境執行的案例,例如這篇:

[C#]設定WebBrowser Control運行的User Agent版本

但是從網站開發者的角度來看,其實只要正確在 HTML 內標記後,就可以讓 WebBowser Control 支援 HTML5。

所以這篇是從 Server 端的角度來看,如果你是 Client 開發者,Server 端不是你能控制的,可以不要看這篇,看看上面引用的連結。

這個做法很簡單,就是在 head 區內加入 Meta 標籤,強制指定 IE 版本。

WebBrowser Control 核心就是 Internet Explorer 桌面版本的引擎,因此對於 IE 有效的標籤,對於 WebBrowser Control 也有效。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
...
</head>
...
</html>

若是網頁開發者,不妨直接從 Server 端解決這個問題,避免 Client 端要改寫程式碼,用此方法對 IE / WebBrowser 都有效,也不會影響 Chrome 或是行動裝置,是你好、我好、大家好的解決方案。

當然, IE8 以前本身就不支援 HTML5 就不用試了。

微軟的 Internet Explorer Developer 關於相容說明:https://msdn.microsoft.com/zh-tw/library/jj676915.aspx

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

在WordPress.com寫網誌.

%d 位部落客按了讚: