今天要聊的開發技巧並不是要讓各位產品大拿們轉崗成爲開發，來搶我的飯碗。只是想告訴大家，如果知道這些技巧，也許會對你的工作帶來一些方便，就像學會了茴香豆的茴字有四種寫法。
Chrome DevTools是Chrome瀏覽器自帶的一個調試工具，在瀏覽器裏面按下F12鍵或者在設置-更多工具裏面就能找到它。這個工具主要是給前端工程師調試頁面用的，但是我們也可以利用它來做一些和開發無關的事情，下面來看看：
-
修改頁面內容
你或許有這種需求，要改動網頁上的一段文案或者字體顏色，看一下效果是否滿意，或者說爲了裝逼，想秀一下自己支付寶8千萬的餘額，這些都可以通過簡單地修改頁面內容來實現。
操作方法：選擇Elements這個Tab，點擊左邊小箭頭，移動箭頭到你要更改的地方點擊，對應頁面元素你就找到了，修改裏面的內容會立刻顯示到頁面上
-
查看手機版網頁
有時候想看某個H5頁面在手機瀏覽器裏或者在微信裏面打開是什麼樣子的，並不需要拿出手機來看，只需要在開發工具裏面，使用模擬屏幕工具，照樣可以達到目的，這樣是不是更方便截圖呢？
操作方法：點擊左邊的手機圖標，選擇你想要的機型，輸入網址，手機版頁面就會展現在你面前
-
下載圖片、視頻、音頻
有很多網頁限制了你右鍵另存圖片或者音視頻，不要灰心，畢竟你是懂技術的產品經理，這張圖片已經被你的瀏覽器拉到本地了，你肯定能把它找出來的。
操作方法：選擇Resources這個Tab，如何找到Images目錄，下面是這個頁面中用到的全部圖片，只需要找到你想要的圖片，就可以右鍵保存了；如果你還懂一些代碼，也可以用方法1中查找頁面元素的方法去找到圖片URL
-
模擬低網速用戶
也許偶爾會收到用戶的抱怨，說你家網站在2G/3G下打開速度很慢，或者說很費流量，但是平時你的體驗卻感受不到這些，這個時候你可以用DevTools的模擬網速工具，來體驗一下低速環境自家網站的效果。同時你還能看到每個請求耗費的時間和流量，如果發現一些比較誇張的現象，可以立馬截圖去找開發優化，這時開發哥絕對不會拒絕你的需求。
操作方法：選擇Network這個Tab，右上方可以選擇一個想要模擬的網絡環境，然後輸入網址，所有網絡請求耗時和流量都展現下方列表裏了
先介紹這4個小技巧，Chrome DevTools裏面還有很多其它功能，拿出你體驗產品的好奇心，前去挖掘吧，說不定還能發現什麼驚喜呢。