一個F12讓UI和前端難分難解，到底是不需前端還是有F12就可以？

剛開始研究TMHL＋CSS的時候就知道有F12鍵的存在，最近做商城項目的時候偶然發現了它的神奇之處，於是總結了下來

這幾年UI好像特別火，滿大街的都是UI。為什麼呢？這就要得益於互聯網的推波助瀾。無論是大公司還是小企業，都在做網站，做app, 所以他們需要UI啊，所以全民UI啊。

然而，最近我發現了一個神奇的東西，那就是F12鍵。功能簡直不能更強大，可以直接copy別人家的設計，別人家的圖片，別人家的... ...

有了F12，前端開發可以跳過設計，直接敲代碼，而且做出來的效果還會比初級UI設計出來的東東，好上個十倍、百倍。

當我們正常的打開網頁，比如打開「小米商城」，它是長這樣的。

然後當我們按下F12鍵，調出調試器，你就會發現網頁的右側就出現HTML和CSS樣式，

如果公司沒有UI，那麼前端就可以直接根據調試器里的樣式，來編寫自己的網頁代碼，複製出一個跟小米商城類似的網站，那麼也就沒有UI的什麼事了。

你不失業，誰失業。

但是如果很不幸，你就是UI，看不懂代碼沒關係，F12鍵也將是提高你的工作效率的神器。

提高你的PC端找圖效率

如果你要設計一個商城，商品圖片的質量直接關係到了網頁設計的質量。那麼找圖將會花費掉你很大一部分時間和精力。但是現在，F12可以幫你解決這個問題。

打開淘寶，天貓，京東等商城購物網站，找到自己需要的商品圖片或者banner，然後按下F12鍵，通過簡單幾個操作就可以得到你所需要的圖片。

同樣的以小米商城為例，紅色矩形框住的部分就是我們需要划重點的部分。

通過5個步驟，我們就能得到自己想要的banner圖片。

1.讓帶有箭頭的那個圖標處於選中狀態 → 2.滑鼠點擊你所需要的圖片，調試器里相對應的代碼就會被選中 → 3.滑鼠右鍵帶下劃線的圖片鏈接 → 4.選擇在新的標籤頁中打開鏈接 → 5.把新頁面中的圖片另存為到自己的文件夾

用一張圖簡單歸納出來就是，

就這樣，別人的圖片就變成你的了，而且同一個網頁上的商品圖片的尺寸和風格都是一致的，你不僅節省了找圖的時間，同時也節省了處理圖片的時間。

通過這種方式所得到的圖片通常都是高清大圖，網站的檔次和逼格一下子就上去了。

節省你的APP項目找圖時間

在用F12調出調試器的情況下，我們可以在PC模式和H5模式下切換自如。同樣，紅色矩形框住的部分需要我們重點掌握。

用滑鼠點擊兩個大小不一樣的矩形所組成的圖標后，把它網址中的「www」改為「m」，它就進入到了正常的H5頁面。然後，在iPhone6處，點擊下拉圖標，你可以切換到任何你需要的、不同屏幕尺寸的手機模式。

用一張圖歸納如下：

在H5模式下，你也可以像之前一樣「偷」別人家移動端的圖片了。

如果你稍微懂一點代碼，你不用再像之前一樣，看到好的樣式設計，先在手機里下載app，然後手機截圖，然後傳到電腦上，然後導進PS里，然後手動測量，然後再設計實施... ... 這樣不僅麻煩，而且還會存在一定的誤差。

通過H5模式，你可以直接查看別人家的版式間距，文字屬性等等，簡直不能更方便了。

神奇的F12鍵，無論是UI還是前端，都是必備技能。

寫在最後，只有不斷學習，才能永不失業。

@劉霞平