目錄
一、進(jìn)入瀏覽器開發(fā)工具的幾種方式
二、Elements（元素）面板
?左側(cè)區(qū)域
右側(cè)區(qū)域
?計(jì)算樣式
事件監(jiān)聽器
大家好！我是爺爺?shù)牟杵呃锵?，這個(gè)名字有沒有讓你想起周董的歌捏？好了，廢話不多說，開始今天咱們的內(nèi)容：
一、進(jìn)入瀏覽器開發(fā)工具的幾種方式
????????相必是個(gè)老手都知道按鍵盤上的f12就行了，但是有些網(wǎng)站會(huì)有反調(diào)式的機(jī)制，有時(shí)候你按f12沒反應(yīng)，不是你卡了也不是你鍵盤壞了，而是網(wǎng)站不允許你調(diào)出f12的面板，那么這個(gè)時(shí)候我們該怎么辦呢？我們可以通過點(diǎn)擊瀏覽器右上角的三個(gè)小點(diǎn)點(diǎn)，里面會(huì)有開發(fā)工具的選項(xiàng)，如圖：
????????除了上面介紹的兩種方法，還有一種是直接在界面上鼠標(biāo)右鍵選擇檢查，如：
總結(jié)下來有以下：
- 快捷鍵F12
- 鼠標(biāo)右鍵選擇檢查
- 瀏覽器右上角的選項(xiàng)（特殊情況下使用）?
二、Elements（元素）面板
? ? ? ? 當(dāng)我們進(jìn)入這個(gè)面板后，展現(xiàn)的區(qū)域有兩大部分，如下：
?左側(cè)區(qū)域
?頁面上的元素基本山都在這里了，頁面上能看到的在這也能看到，頁面上看不到的在這依然能看到，在這里我們可以直接對元素進(jìn)行元素進(jìn)行拖拽，也可以修改元素的相關(guān)內(nèi)容以及屬性：
?比如上面這個(gè)，當(dāng)我想知道密碼是否輸入正確的時(shí)候，它并沒有提供給我們顯示密碼的按鈕，這個(gè)時(shí)候左側(cè)的元素面板就能派上用場了 ，我可以修改這個(gè)標(biāo)簽的type屬性，就能讓它顯示密碼，效果如下：
好玩吧？想學(xué)嗎？我教你啊，嘿嘿~
首先我們選中輸入的密碼，然后鼠標(biāo)右鍵選擇檢查的選項(xiàng)：
?接著會(huì)跳出下面的這個(gè)面板：
接著我們雙擊password那里，修改成text類型，回車之后就有效果啦：?
?
除了這些操作，我們還可以右鍵元素，里面有很多選項(xiàng)，可以自己玩玩；比如你要寫js控制元素，那么你就先需要獲取這個(gè)元素的DOM對象，所以就要寫出取這個(gè)標(biāo)簽的js代碼，在這個(gè)面板中我們是可以直接將js復(fù)制出來的，如下：
?復(fù)制的內(nèi)容：
document.querySelector("#p")神奇吧？ 是不是很方便？同時(shí)也可以給這個(gè)標(biāo)簽加斷點(diǎn)，當(dāng)瀏覽器渲染它的時(shí)候就可以停留在你下斷點(diǎn)的位置，自己去玩玩吧?。?！
右側(cè)區(qū)域
這個(gè)區(qū)域基本上是對頁面樣式的調(diào)式，我們可以通過這里邊的css調(diào)出我們想要的效果之后，再將相關(guān)的值寫到我們的css代碼里邊；比如我將授權(quán)登錄的按鈕變成了綠色了：
細(xì)心的老鐵應(yīng)該注意到了一些奇奇怪怪的按鈕了?
下面大概說一下我有用到的面板：
?計(jì)算樣式
這里邊直接顯示的是元素的相關(guān)樣式，也比較清晰：
?我個(gè)人覺得樣式和計(jì)算樣式差不多，這個(gè)看個(gè)人使用習(xí)慣，用哪個(gè)都行?。?！
事件監(jiān)聽器
?事件監(jiān)聽器如名字的意思一樣，它能查看到該元素的祖父元素事件：
那么我要是只想看這個(gè)元素有沒有事件監(jiān)聽呢？我們只需要把祖父的那個(gè)√去掉就好了：
?啥也沒顯示，說明該元素沒有事件監(jiān)聽?
?今天的介紹就到這啦，下次見?。。?/strong>
??原創(chuàng)不易，還希望各位大佬支持一下！
??點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力?！
??收藏，你的青睞是我努力的方向！文章來源：http://www.zghlxwxcb.cn/news/detail-412622.html
??評(píng)論，你的意見是我進(jìn)步的財(cái)富！?文章來源地址http://www.zghlxwxcb.cn/news/detail-412622.html
到了這里，關(guān)于前端開發(fā)調(diào)式必備技能F12開發(fā)者工具之Elements（元素）面板，詳細(xì)圖解帶流程【第一部分】的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
