瀏覽器的 console log 幾種不同呈現方式

瀏覽器在 Debug 常常使用 console.log(),除了 console.log 外,還有沒有更多的參數可以使用呢?

  • console.log():標準的文字
  • console.error():出現紅字錯誤文字 和 錯誤的 X
  • console.warn():出現黃色警告文字 和 警告的 !
  • console.table():可於 console 出現表格
  • 客製化 console.log:(前景綠字、背景黃色、24px 字體大小)
    (() => {
        console.log('%c%s', 'color: green; background: yellow; font-size: 24px;','Success!')
    })();

詳見此篇:Better console.logs

微軟新版 Edge 會偽裝成其它瀏覽器 - 2019

瀏覽器都會帶 User Agent 來跟 Server 說自己是誰,Server 的程式端才能給正確的資料、格式、畫面。

但是微軟新版的 Edge 會隨著 Domain 不同,會修改自己的 User Agent 來偽裝成其它瀏覽器~

閱讀全文〈微軟新版 Edge 會偽裝成其它瀏覽器 - 2019〉

微軟新版的 Windows 10 將使用 Chromium 取代 Edge 的核心

實做瀏覽器的核心很辛苦,太多瀏覽器的核心又會造成前端工程師的困擾,瀏覽器太多版本實在不是好事,不過太少造成獨占也不太好就是了~

  • 註:不過,瀏覽器少對 前端工程師 與 QA 來說,應該都算是好事~

閱讀全文〈微軟新版的 Windows 10 將使用 Chromium 取代 Edge 的核心〉

蘋果、微軟等 四大瀏覽器業者 將在2020年停止支援 TLS 1.0、1.1

蘋果 (Safari)、微軟 (IE、Edge)、Google (Chrome)、Mozilla (Firefox) 為目前主流瀏覽器的四大業者,他們共同宣佈將於 2020年中止支援 TLS 1.0TLS 1.1,建議採用 TLS 1.2 以後的版本。

閱讀全文〈蘋果、微軟等 四大瀏覽器業者 將在2020年停止支援 TLS 1.0、1.1〉

使用 Polyfill 來解決瀏覽器不支援 HTML 新功能的問題

HTML5 在某些瀏覽器不支援,想要跨瀏覽器支援,可以靠 Polyfill (外部 library) 讓瀏覽器支援,此篇裡面有各種的 Polyfills (SVG、Canvas、Web Storage、Video... )

瀏覽器的 Cookie 容量限制

瀏覽器的 Cookie 是做登入、紀錄、追蹤等等,最常使用的工具。

不過現在 Cookie 要放的東西越來越多,Cookie 到底可以塞的容量是多少呢?

  • 註1:照標準應該是 4096 bytes,不過瀏覽器實作時,都可能會有些落差~
  • 註2:下述取自此篇:RFC-2965 HTTP State Management Mechanism
    • Practical user agent implementations have limits on the number and size of cookies that they can store.
      • at least 300 cookies
      • at least 4096 bytes per cookie (as measured by the characters that comprise the cookie non-terminal in the syntax description of the Set-Cookie2 header, and as received in the Set-Cookie2 header)
      • at least 20 cookies per unique host or domain name

閱讀全文〈瀏覽器的 Cookie 容量限制〉

將 Vim 編譯成 WebAssembly 可在瀏覽器使用

想要讓 Vim 在到處都可以使用,最快的方式,就是跑在瀏覽器上,但是 Vim 功能太強大,要怎麼在瀏覽器跑,怎麼樣都不太可能重寫一套,這邊有人直接將 Vim 編成 WebAssembly,就可以在瀏覽器使用 Vim 囉~

閱讀全文〈將 Vim 編譯成 WebAssembly 可在瀏覽器使用〉

如何清除 Firefox 與 Chrome 的 HSTS 設定

HSTS (HTTP Strict Transport Security) 是讓瀏覽器強制使用 HTTPS 來進行溝通,但是設定太嚴謹,或者是在 Local 端開發,會造成一些困擾,所以要來研究看看各個瀏覽器要如何移除 HSTS 的方法。

  • 註:HSTS 設定是存在瀏覽器端,所以 Firefox 與 Chrome 要分別清理

閱讀全文〈如何清除 Firefox 與 Chrome 的 HSTS 設定〉

建立本地端的 Wildcard SSL 給開發環境使用

Google、Apple 都在推 HTTPS 的情況,在線上可以買憑證、或者用 Let's encrypt 來產生憑證,但是在「開發環境」裡面,想要有 SSL 的支援,就會有些麻煩。

  • 註1:開發環境可以使用 http,線上在使用 https,不過現在網域通常切分開的情況,能夠有個本地端的憑證,還是比較方便。
  • 註2:可以把線上的憑證存到本地端,但是這本身跟安全性違背,另外一個是,每2~3個月都要換憑證,還是蠻麻煩的。
  • 註3:此憑證建立後,查看的單位名稱為:Internet Widgits Pty Ltd

閱讀全文〈建立本地端的 Wildcard SSL 給開發環境使用〉