iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Software Development

前端工程師不能不知道的生產力工具 系列

在這個系列裡,我會找幾個對前端開發上頗為實用的工具來做使用說明與心得。希望能藉由這些介紹,來幫助大家提升工作上的生產力,開發上更有效率。

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day01] 小編的話與主題列表

前言 身為想減少雜事,早點下班認真向上,追求開發效率的前端工程師,或多或少都會仰賴一些工具來幫助我們達到特定目的。像是 - 使用瀏覽器的開發者工具進行除錯、效能...

2020-09-16 ‧ 由 YURI 分享
DAY 2

[Day02] 瀏覽器開發工具 - 基本篇

前言 瀏覽器的開發工具對於大多數的 Web 前端工程師來說,就像是陽光空氣水一樣,從踏入開發的一開始就不能沒有它。從最基本的檢查 DOM、調整樣式到效能檢查、網...

2020-09-17 ‧ 由 YURI 分享
DAY 3

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

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

2020-09-18 ‧ 由 YURI 分享
DAY 4

[Day04] 瀏覽器開發工具 - 樣式篇

今天要來介紹跟樣式有關的檢視與調校,一樣我們以開發情境來一一說明如何操作。 切換偽類的效果 開發者工具支援以下四種偽類(Pseudo-classes)的樣式檢視...

2020-09-19 ‧ 由 YURI 分享
DAY 5

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

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

2020-09-20 ‧ 由 YURI 分享
DAY 6

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

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

2020-09-21 ‧ 由 YURI 分享
DAY 7

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

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

2020-09-22 ‧ 由 YURI 分享
DAY 8

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

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

2020-09-23 ‧ 由 YURI 分享
DAY 9

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

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

2020-09-24 ‧ 由 YURI 分享
DAY 10

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

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

2020-09-25 ‧ 由 YURI 分享