PM 偷學系列文章
偷學背景
Q 這次要偷學什麼
Ａ瀏覽器都有的開發者工具(DevTools)
Q 為什麼想偷學這個
A1 學會如何簡單調整 CSS，加速需求確認流程
因為有時候客戶會有調整網頁樣式的需求，但還不太確定要調整成怎麼樣，會希望可以看實際調整成的樣子。如果直接請工程師製作會有很多來回調整的溝通成本，而透過開發者工具(DevTools)可以直接在網頁上立即調整 CSS 截圖給客戶看，等確定後再請工程師進行調整。
A2 在網頁有問題可以第一時間找錯誤訊息給工程師
有時候網頁上出現的問題不易重現，即時查找當時出現的錯誤訊息便很重要。透過開發者工具(DevTools)可以第一時間看到錯誤訊息有哪些，提供工程師 debug 時能有所依據。
Q 沒有其他地方可以看錯誤訊息了嗎
A 有的，可以去看 log，不過因為上面寫的資訊我還沒參透，等學會那天再來分享。
開發者工具(DevTools)基礎學起來
本次諮詢的對象為前端工程師，請教瀏覽器基本的 developer tool 使用方式。適合對 CSS 沒什麼基礎，但知道要想要簡單調字級、間距等基本 CSS 的人參考，如果已經會切版寫 code 的話，可以到換篇閱讀了哈。另外因為我使用的目的為即時呈現 CSS 加速溝通 ，所以在 code 的設計上會先忽略掉，比較著重在可以立即示意調整上。
什麼是開發者工具(DevTools)
官方說明：開發者工具是一套內置於瀏覽器中的網頁開發和調整測試工具，可用來對網站進行迭代和分析。
我的白話文說明：可以不用進到寫程式的環境中，快速調整看變動的地方。
各家瀏覽器都有提供此工具，詳細介紹可以參考：
如何打開開發者工具(DevTools)
Chrome 的開發者工具
你可以用以下三個方式打開
- 在瀏覽器頁面按右鍵，選擇「檢查」（Inspect）即可叫出
- 在瀏覽器目錄選擇檢視（View） > 開發者（Developer） > 開發者工具（Develop Tools）
- 使用快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
Safari 的開發者工具
Safari 的開發者工具需要在設定介面先開啟。
設定方式：點選 Safari 左上角的 Safari，選擇 Preference 後出現設定視窗，再到 Advanced 點選 最下方的 Show Develop menu in menu bar 後，就可以如同 Chrome 的使用方式了。
以下以 Chrome 為例，其他的瀏覽器使用方式也都差不多，大家可以舉一反三（其實是懶得寫哈
Chrome 開發者工具(DevTools)功能簡介
- Device：可以切換不同裝置看網站的響應式變化（在桌機、平板、手機網頁各會長怎樣）
- Element ：看網頁結構（HTML & CSS）、看 metadata （詮釋資料）確認分享資訊是否正確，以及 SEO 觀察
- Console：看 Google Analytics 設定、Javascript log 看網頁出的錯誤
- Network：看網頁發了哪些 request、cache 設定是否正確（cache-control）
- Performance / Memory / lighthouse：進行頁面效能的評估 → 較少用，本篇不介紹
- Application：看網頁用了哪些 cookies / service worker → 較少用，本篇不介紹
Device — 看各裝置的響應式變化
點選開發者工具的左上角圖示，可以開啟裝置模式，並調整出自己想要看的裝置尺寸。
Element — 看網頁結構（HTML & CSS）
在有第一版網頁出來後，多會需要驗收與需求方確認是否符合需求。此時多會有些微調的需求，而需求方的口述形容有時候會和實際上製作出來的有落差，此時便可以直接透過開發者工具直接調整，讓需求方確認需求。
要看 HTML 點選開發者工具中的元素（Element）便會看到這個頁面的元素有哪些。
接著可以選取你要看頁面的元素。
學會如何看元素後，我們就來學如何東改西改吧！
如何改字
打開開發者工具，找到最新文章的區塊，點選到文字，找到以下對應的 tag 進行更改。
因為邊改網頁就會邊做調整，如果真的改錯了，重新整理就好。就是一個慢慢改到你想要的感覺的過程。
- 文字：
<> 要改的字 </> - 字型：
font-family - 字級：
font-size - 字的間距：
letter-spacing - 行高：
line-height - 顏色：
color - 置左置中置右：
text-align(置左就改成 left，置中 center ，置右改成 right) - 調整內距：
padding（上，右，下，左） 若只有一個，是全部。若是兩個（上下，左右）。若是三個（上，左右，下）
如何抓圖片
有時候會需要找圖片的原始網址，一樣先找到圖片的區塊，去看他圖片網址在哪即可。
- 原始圖片：
src=“圖片網址"
Console — 看 Google Analytics 設定、Javascript log
Console 可以看到網站發了哪些請求，像是發送給 Google Analytics 數據追蹤的設定，或是當有請求出問題時都可以從這看到。
如何看 GA
首先要先下載 Chrome 的 plugin Google Analytics Debugger，安裝完成後，在你要驗收的網站打開此 plugin。在會觸發送請求到 Google Analytics 時，Console 便會顯示目前有送的項目有哪些。
在驗收時多會確認的基本項目如：
- tracking ID：確認是否送到正確的帳號（如果測試機和正式機不同的要注意啊！）
- eventAction / eventCategory / eventLabel ：確認事件設定是否正確
其他項目就依每次專案的驗收需求而定。
如何看 Javascript log
有時候網站出問題，工程師在 debug 的時候會需要知道發生什麼事情，這時候即時到開發者工具中看哪個請求出問題，以及錯誤訊息是什麼，可以加速確認問題。
以下示範使用 Ad-block 會造成廣告出不來的錯誤（工程師：自己愛裝套件，還說是廣告沒出來！）
Network — 看網頁發了哪些 request、cache 設定是否正確（cache-control）
在 Network 有比較多進階功能，像是可以看哪些 request、哪個 request 發生錯誤，不過多是工程師在看，我主要會看 cache control 設定是否正確。
如何看 Cache 設定多久
點選 Network 後選擇你要的頁面，接著在 Headers 處可以看到 Response Headers 下有 cache-control ，所寫的 max-age 就是設定 cache 的最長時間。另外也可以看是否有過 nginx 處理，或是確認目前 cdn 有沒有設定正確。（也是可以去偷看別人網站是用哪家 CDN 啦）
寫在最後
不確定是否每個 PM 都會用到開發者工具，不過我自己第一次使用開發者工具和客戶直接對網頁設計上的微調、當網頁有問題時，可以嘗試看出 request 提出可能發生問題與解法的方向，都蠻有成就感。不過如果要再更深入的調整，還是得靠工程師來做。
會使用開發者工具後，可以作微調的項目，不只上述的項目，有時一些動畫效果也可以調整。例如：淡入淡出的時間等。透過實際去看元素架構，也可以更能理解每個功能要怎麼製作，以及可能花的成本多大。
自己和工程師聊了一下，到底 PM 會使用開發者工具在工作流程上有沒有幫助，工程師覺得會的話比較好，可以先確認樣式要改怎樣，網頁錯誤時也可以提供更精確的時間，減少來回討論需求或是 debug 的時間。
感謝工程師同事總是不厭其煩的教學技術知識，每次當可以不假工程師隻手確認好事項，都覺得自己好棒哈哈。總之給大家參考囉！
如果你喜歡這篇文章，想看更多這系列的文章，也歡迎拍手讓我知道，謝謝！
