前言 Chrome 是許多人電腦必裝的瀏覽器之一，自今年微軟 (Microsoft) 宣佈 Internet Explorer (以下簡稱 IE) 最後支援時間...
小菜
‧
2020-09-07
關於 SameSite Cookie 所帶來的問題，絕大部分有串接外部金物流網站的購物網站，應該都無法避免，還不了解 SameSite 問題的，建議先閱讀 瀏覽...
cookie 被 OpenCart 網站用來記錄資訊，儲存於訪客端的瀏覽器，並於每次瀏覽網頁時，傳遞這些資訊以便網站快速了解訪客的暫存狀態。以 OpenCart...
Recently, I found my bookmark is too many to find out what I really want, and wh...
網路教學資源:https://www.zhihu.com/question/52752468/answer/132369469 因為最近專案要測試PWA 所以...
不管網頁設計師或前端工程師，使用Chrome做為網頁開發已是基本工具未免有人不知道如何使用，又或者一直只用些基礎功能者想加強功具可以參考一則六角在Udemy上的...
Chrome Canary 網站連結：https://www.google.com/chrome/canary/進入網站後就可以根據自己的電腦系統下載，金絲雀版...
又來到工欲善其事，必先利其器的時間～今天要來介紹針對開發 10 個好用的 Chrome 插件，使用這些插件有什麼好處呢？ 可以快速且清楚了解其他網站使用哪些套...
Google Chrome ERR_SSL_SERVER_CERT_BAD_FORMAT如下圖這個網站無法提供安全連線https://www.ublink.or...
在我們最近舉辦 The F2E - 前端修練精神時光屋的各種活動中，經常都會釋出 API 提供給大家在開發網頁時，可以更有彈性的使用這些資料，而在釋出這些 AP...
使用方式: 1.只要是有href、link的網頁元素會在右上角顯示EZ圖案 2.滑鼠點選它,就可以不用開新頁面下瀏覽網頁 :-) 連結: ezLinkPrevi...
問題釐清 什麼是「滾動條」？滾動條指的是下圖右側被紅線框起來的部分： 只要網頁內容大於視窗，滾動條就會出現。 一般來說，只要不是body層次的滾動條，那用ov...
今天是鐵人賽的最後一天，本來這一天也是要寫技術內容，不過後來想想還是來寫參賽的心得好了XD 其實這並不是我第一次參加鐵人賽，去年我也有報名並且也有發文，雖然只發...
今天算是正式文章的最後一篇 (明天要發完賽感言XD)，在鐵人賽一開始的時候，我本來想規劃幾天的時間來跟大家一起來討論效能面版 (Performance pane...
今天我們要介紹的工具是記憶體面版中的最後一個工具: Record Allocation Profiler，這個工具可以讓我們按函數來檢視說那些函數佔用了許多記憶...
今天我們要透過記憶體面版的另一個工具來檢測記憶體洩漏的這個問題，先來看一下今天我們要用來檢測的程式： 今天的測試程式範例一樣來自官方文件，而我也把範例程式放到...
昨天我們一起看了一段官方文件裡提供的程式，它會產生分離的 DOM 節點，這些節點不會被垃圾回收 (Garbage Collection) 所以會造成記憶體洩漏。...
今天我們要開始一起來討論記憶體面版 (Memory panel)，這個面版的主要功能就是讓你做網站的記憶體體檢，像是記憶體洩漏、記憶體膨脹和頻繁的垃圾回收都可以...
我們在前面有簡單介紹了審查面版(Audits panel)，它可以幫我們檢測我們的網站是不是有遵循最佳實踐 (Best practices)，並提供我們每個問題...
經過這幾天的介紹，我想大家對這個面版已經有一定的認識了，但是我們其實還沒有進到每個 HTTP 請求裡面，去查看這個請求細節，而這就是我們今天要做的。好，就讓我們...
今天我們要來看 HTTP 請求列表的欄位所代表的意義 HTTP 請求列表 請先打開開發者工具並切換到網路面版，然後重新載入畫面一次。這時候你的 HTTP 請求列...
昨天我們介紹了網路面版的介面，也一起看部份 HTTP 請求列表的功能 (Request row)，今天我們要一起來討論總覽 (overview)。 但在開始之前...
今天要一起來看的是網路面版 (Network panel)，網路面版主是要拿來檢查資源透過 HTTP 傳輸的狀況。當我們的瀏覽器向網頁伺服器發出要求直到伺服器把...
今天我們要把 JS 除錯控制台 裡的功能講完，然後再介紹在中斷點作用中的時候，我們如何使用控制台 (Console) 來快速除錯。 使用 JS 除錯控制台 在開...
到目前為止，我們已經知道怎麼在開發工具裡設置中斷點，也一起討論了兩種設置中斷點的方法跟它們的差異。今天我們要介紹更多除錯的小技巧，準備好了嗎？ 使用 JS 除錯...
昨天我們中斷點講到了一半，今天我們就接著一起來看在中斷點作用後，我們可以做些什麼。 使用中斷點來除錯 請重覆昨天的步驟，並使用官方的 Demo 來打開中斷點，如...
今天我們要開始來一起討論如何使用原始碼面版 (Sources panel) 來除錯你的網頁。在開發者工具中，我最常用的面版就是元素面版跟原始碼面版，每當我在進行...
在 HTML5 的標準裡面，加入了很多以前所沒有的前端儲存方式像是 Local and session storage, IndexedDB 等等。而 Chro...
因著現在行動裝置的流行，還有響應式網頁設計 (Responsive Web Design, RWD) 在這幾年成為設計網站流程中重要的一環，Chrome 開發者...
昨天我們簡單的介紹了控制台面版的讀取-求值-輸出循環功能，今天我們要一起要來看它提供的一些方便的 API，以及如何透過這些 API 與元素面版一起使用。 常見...
凱特麻麻桑
六角學院
konekoya
iThome鐵人賽
看影片追技術