iT邦幫忙

chrome相關文章
共有 117 則文章
鐵人賽 Software Development DAY 13

技術 [Day13] 瀏覽器開發工具 - 自行開發篇

這個系列的最後,我想要整理一下如何開發擴充功能的起手式。 從前面的介紹可以大致了解各種主要情境下的操作,以及針對前端開發上可以使用的偵錯工具。 但是有些情況下還...

鐵人賽 Software Development DAY 12

技術 [Day12] 瀏覽器開發工具 - 燈塔篇(Lighthouse)

在Day7的介紹中,我們初步認識了 Lighthouse ,在效能的檢測上可以發現問題,並且給予修改上的建議。 但 Lighthouse 其實還有其他面向的檢...

鐵人賽 Modern Web DAY 14
前端開發 30 個問題 系列 第 14

技術 How browser works (1) - A brief of Chrome architecture

前言 2020 秋天,我將用 30 天的時間,來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識,有些問題可能對有些讀者來說相對...

鐵人賽 Software Development DAY 11

技術 [Day11] 瀏覽器開發工具 - 擴充功能篇

雖然開發者工具中已經提供相當豐富的功能,也一直持續發展中。不過 Google 有開放提供可裝在開發者工具的擴充功能的 API,像是目前大多主流的前端框架的開發者...

鐵人賽 Software Development DAY 10

技術 [Day10] 瀏覽器開發工具 - 資源篇

今天我們來看看跟網站資源比較相關的兩個面板 - Applications 跟 Security。 為了要展示面板功能與設定,我們以大家熟悉的 星巴克 PWA 版...

鐵人賽 Software Development DAY 9

技術 [Day09] 瀏覽器開發工具 - 網路篇

當我們使用 LightHouse 和 Performance 的面板找出前端程式可優化的地方,接下來就是看我們開發的應用,在進行網路請求的時候,速度上和資料的正...

鐵人賽 Software Development DAY 8

技術 [Day08] 瀏覽器開發工具 - 效能篇(下)

昨天主要介紹使用 Lighthouse 幫助我們從使用者的角度來發現問題與提供解決方式。今天則是要以程式的角度,以 Performance 面板裡的 Timel...

鐵人賽 Software Development DAY 7

技術 [Day07] 瀏覽器開發工具 - 效能篇(上)

完成除錯後,接著就要幫我們開發的頁面進行效能上的檢測和優化。在現在各種裝置的普及,前端應用也愈多樣複雜,使用者對於速度也就愈要求。 為了提升使用者的體驗,開發者...

鐵人賽 Software Development DAY 6

技術 [Day06] 瀏覽器開發工具 - 除錯篇(下)

觀察執行結果 當每次程式暫停在斷點時,除了要觀察頁面上的變化,很多時候還需要監測運算後的變數。 所以我們需要利用開發者工具現有的功能來方便做這些事情。 Scop...

鐵人賽 Software Development DAY 5

技術 [Day05] 瀏覽器開發工具 - 除錯篇(上)

接下來整理的部分是我覺得這個part最重要的內容之一。 人不是神,只要有寫程式的一天,就會面臨臭蟲的到來 (除非你是想先甘後苦,總之先交給QA的那種類型,但最好...

鐵人賽 Software Development DAY 3

技術 [Day03] 瀏覽器開發工具 - 元素篇

今天的主題是針對在元素(Element)面板上可以進行的動作,包括對頁面上的元素進行結構的變動,或著樣式上的檢視。廢話不多說,直接切入正題吧! 對當前選取到的元...

鐵人賽 Modern Web DAY 2

技術 二日目:在VScode 撰寫JavaScript。插件。Chrome檢查工具。

大家安 我是SONYKO  ٩(ˊωˋ*)و✧ 今天進入第二天~    相信大家都知道撰寫程式必須用「文字編輯器」來撰寫,今天就簡單的來介紹一下目前很多開發者在...

鐵人賽 自我挑戰組 DAY 5

技術 Day05 - Mac、Chrome、iTerm2、Visual Studio Code 上常用的快捷鍵

前言 紀錄個人常用的 Mac 、 Chrome 、 iTerm2 、 Visual Studio Code (以下簡稱 VS code) 的快捷鍵,若有覺得不錯...

鐵人賽 自我挑戰組 DAY 3

技術 Day03 - Chrome 的小技巧 - 內建 URL 轉 QRcode

前言 過去要將網頁轉 QRcode 需透過擴充功能(extensions)尋找合適的套件才得以實現,從 Chrome 85 電腦版開始,將此功能納入實驗中惹,未...

鐵人賽 自我挑戰組 DAY 2

技術 Day02 - Chrome 的小技巧 - 內建截圖功能

前言 Chrome 是許多人電腦必裝的瀏覽器之一,自今年微軟 (Microsoft) 宣佈 Internet Explorer (以下簡稱 IE) 最後支援時間...

技術 OpenCart 修正 SameSite Cookie 問題說明(以串接ezShip為例)

關於 SameSite Cookie 所帶來的問題,絕大部分有串接外部金物流網站的購物網站,應該都無法避免,還不了解 SameSite 問題的,建議先閱讀 瀏覽...

技術 瀏覽器的 SameSite Cookie 對 OpenCart 網站造成的影響

cookie 被 OpenCart 網站用來記錄資訊,儲存於訪客端的瀏覽器,並於每次瀏覽網頁時,傳遞這些資訊以便網站快速了解訪客的暫存狀態。以 OpenCart...

技術 Bookmarks Sync on Firefox & Chrome

Recently, I found my bookmark is too many to find out what I really want, and wh...

技術 [學習筆記] 去除chrome翻譯提示功能

網路教學資源:https://www.zhihu.com/question/52752468/answer/132369469 因為最近專案要測試PWA 所以...

鐵人賽 自我挑戰組 DAY 17

技術 [蛻變事實/D17] 設計師勇闖前端城-(必備工具4:利用Chrome 幫你練功找壞蟲)

不管網頁設計師或前端工程師,使用Chrome做為網頁開發已是基本工具 未免有人不知道如何使用,又或者一直只用些基礎功能者想加強功具 可以參考一則六角在Udemy...

鐵人賽 Modern Web DAY 7

技術 Chrome Canary(Chrome 金絲雀版)

Chrome Canary 網站連結:https://www.google.com/chrome/canary/ 進入網站後就可以根據自己的電腦系統下載,金絲雀...

鐵人賽 Modern Web DAY 7

達標好文 技術 10 個好用的 Chrome 插件(上)

又來到工欲善其事,必先利其器的時間~ 今天要來介紹針對開發 10 個好用的 Chrome 插件,使用這些插件有什麼好處呢? 可以快速且清楚了解其他網站使用哪些...

技術 Google Chrome ERR_SSL_SERVER_CERT_BAD_FORMAT

Google Chrome ERR_SSL_SERVER_CERT_BAD_FORMAT 如下圖 這個網站無法提供安全連線 https://www.ublink...

鐵人賽 Modern Web DAY 1

達標好文 技術 Postman - 測試 API 神器 1/2

在我們最近舉辦 The F2E - 前端修練精神時光屋的各種活動中,經常都會釋出 API 提供給大家在開發網頁時,可以更有彈性的使用這些資料,而在釋出這些 AP...

達標好文 技術 chrome 插件 #1 : ezLinkPreview (不用開新分頁瀏覽新的網頁連結)

使用方式: 1.只要是有href、link的網頁元素 會在右上角顯示EZ圖案 2.滑鼠點選它,就可以不用開新頁面下瀏覽網頁 :-) 連結: ezLinkP...

技術 怎麼把「滾動條」隱藏?

問題釐清 什麼是「滾動條」? 滾動條指的是下圖右側被紅線框起來的部分: 只要網頁內容大於視窗,滾動條就會出現。 一般來說,只要不是body層次的滾動條,那用o...

鐵人賽 Modern Web DAY 26

技術 GTM 26 - 番外篇 - 如何實作 Openseach 於網站中,在 Chrome 輸入網址後按 Tab 就可以直接搜尋網站內容

GTM 社團 如果網站有實作站內搜尋的話,如何加上 Opensearch,讓各瀏覽器可以加入自己網站的搜尋引擎,ex:在 Chrome 輸入網址後按 Tab...

鐵人賽 Modern Web DAY 30
認識 Chrome 開發者工具 系列 第 30

技術 寫在最後

今天是鐵人賽的最後一天,本來這一天也是要寫技術內容,不過後來想想還是來寫參賽的心得好了XD 其實這並不是我第一次參加鐵人賽,去年我也有報名並且也有發文,雖然只發...

鐵人賽 Modern Web DAY 29
認識 Chrome 開發者工具 系列 第 29

技術 使用效能面版來檢測記憶體洩漏

今天算是正式文章的最後一篇 (明天要發完賽感言XD),在鐵人賽一開始的時候,我本來想規劃幾天的時間來跟大家一起來討論效能面版 (Performance pane...

鐵人賽 Modern Web DAY 28
認識 Chrome 開發者工具 系列 第 28

技術 記憶體面版 - 記憶體分配分析器

今天我們要介紹的工具是記憶體面版中的最後一個工具: Record Allocation Profiler,這個工具可以讓我們按函數來檢視說那些函數佔用了許多記憶...