這是一篇基礎教程，假如看官連這道坎兒都過不去的話，后面的裝修會讓你夠嗆！假如能成功渡劫的話，后面的代碼玩起來會賊6！
想必很多看官都會碰到這樣的情況：別人家的特效賊6，可惜自己復制不了代碼；別人家的主圖挺不錯，可惜自己獲取不了原圖；明明是一個很簡單的問題，自己卻要四處找人浪費大把的時間才把問題解決......
假如看官有以上癥狀，說明看官是時候需要提升下自己的實力了！而本文只是眾多轉折點中的一個，能否成功6到沒朋友還需要看看官是否愿意付出了。好了，廢話不多說，開工！
不管看官是從事淘寶美工還是web前端還是后端，要是不會個審查元素簡直沒法見人！
有這么嚴重嗎？
身為美工，平時找素材、找代碼碰到權限問題怎么破？
身為前端，頁面布局有問題和js出現報錯怎么破？
身為后端，返回數據到前端時請求異常怎么破？
雖然審查元素并不能完全解決所有問題，但對我們的工作還是非常有幫助的！
下面來介紹下審查元素的用法和一點小功能，讓看官感受下她的神奇！
打開任意一個瀏覽器(推薦360極速)，在頁面空白地方右鍵--點擊審查元素，然后就喚醒了瀏覽器的調試功能。如圖：
需要注重的是：不同的瀏覽器命名可能不同，但這并不影響功能。
當然了，假如看官覺得上面的方法太low的話，可以來個騷操作--按下F12即可(注重這是一個鍵不是3個鍵)。怎么樣，是不是感覺瞬間厲害了許多！
2.1、界面
點擊審查元素后的界面是這個樣子：
藝靈已在圖中大致的標識了下，界面分三塊。上面是視圖區，左側是代碼區，右側是css區。這三個區域是一一對應的關系。
2.2、查看淘寶網的logo
下面，藝靈以獲取淘寶網的logo為例，給看官展示下如何使用這個技能。
首先打開淘寶網，然后鼠標放到淘寶的logo上面，然后右鍵，然后點擊審查元素，此時我們可以看到高亮的logo和代碼以及可以看到logo的尺寸。如圖：
下面我們點開代碼中的a標簽，然后看看里面是不是一個img標簽。此時可以看到，a標簽里面并沒有img標簽，但logo卻是顯示的。如圖：
看官是不是有點迷惑？是不是想不通這個logo是怎么顯示的？
之所以用淘寶來講是因為這個例子比較典型，是一個相對而言技術含量偏高的一個操作。
藝靈也不賣關子了，直接開講了。注重前面我們說了，審查元素的界面被分為三塊，現在我們只顧著前兩塊了忘記了第三塊，所以我們來看看第三塊吧。如圖：
注重看右側css中有一個background屬性。看官是不是猜到了什么？
沒錯！logo就在這里！當我們把鼠標放到該屬性的值上面時，可以看到淘寶的logo圖像。如圖：
2.3、獲取src
歷經千辛萬苦，終于可以大干一場了！下面我們就把淘寶網的logo給拿出來吧！
好的！
10秒鐘后，噗......
咋了？
不知該如何下手啊！
注重了！繼續右鍵--Copylinkaddress就可以了。如圖：
現在我們就已經獲取到了logo的src地址。
2.4、修改src
既然講了獲取，下面就來講下修改。因為平日調試時，這些都是必不可少的步驟。
下面藝靈就教在看官如何把百度的logo換成淘寶的logo。
直接在地址欄中打開百度的首頁，然后鼠標放到logo上右鍵，然后點擊審查元素，這個時候會定位到代碼上。然后我們雙擊屬性，然后把后面的值刪除選中后進行右鍵，然后粘貼，接下來在任意空白地方單擊就行了。如圖：
此時可以看到百度的logo已經變成淘寶的了。如圖：
2.5、刪除
這個實際情況中用的不多，還是來提下吧。
首先在左側找到要刪除的代碼塊，然后右鍵，點擊Deleteelement即可。
還拿剛才的例子來講，我們已經把百度的logo替換成了淘寶的，現在我要刪除這塊代碼。步驟如下：
1、鼠標放到logo上；
2、審查元素；
3、鼠標放到img標簽上右鍵；
4、點擊Deleteelement就完成了操作。如圖：
2.6、復制
復制也是經常會用到的一個操作，大致步驟：在想要復制的代碼塊上右鍵，然后點擊Copy，然后點擊Copyelement即可。如圖：
2.7、修改
這個修改跟上面的修改是有區別的，這個修改也是適用于大范圍的，例如：代碼塊的修改。步驟跟復制一樣，只是很后一步有變化。大致步驟：在想要修改的代碼塊上右鍵，然后點擊EditasHTML，此時對應的代碼塊處于可編輯狀態，編輯完成后在任意空白地方單擊即可保存。如圖：
上面藝靈已經將審查元素的修改、復制、刪除等功能都講了一遍。假如看官需要把握的話，只有不斷的練習才行。這樣吧，給看官們留一道簡單的作業題：把今日頭條的logo換成淘寶的?？垂倏梢栽谠u論區中進行回復哦~
對于文章中提到的這些演示案例，顯然在工作中是不符合實際的。這些演示中是為了給看官講解下大致的操作方法，所以看官在實際中需要靈活運用。
文章地址：http://m.meyanliao.com/article/online/7932.html
