親注冊登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦。ò蕡D片、文字詳情等)請您及時(shí)注冊登錄-bmrsportswear.com
您需要 登錄 才可以下載或查看,沒有賬號?立即注冊
x
本帖最后由 學(xué)習(xí)NO.1 于 2016-1-10 22:49 編輯
Chrome(F12開發(fā)者工具)是非常實(shí)用的開發(fā)輔助工具,對于前端開發(fā)者簡直就是神器,但苦于開發(fā)者工具是英文界面,且沒有中文,這讓很多朋友都不知道怎么用。下載吧小編為大家?guī)鞢hrome開發(fā)者工具基礎(chǔ)功能和高級性能分析器(Timeline、Profiles)的圖文詳解教程,下面是基礎(chǔ)功能篇。 提示:右鍵點(diǎn)擊圖片選擇在新窗口或新標(biāo)簽頁中打開可查看大圖。 一、Elements
01.png (63.36 KB, 下載次數(shù): 48)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...01
2016-1-10 22:28 上傳
在Element中主要分兩塊大的部分:html結(jié)構(gòu)面板(A)和操作dom樣式、結(jié)構(gòu)、時(shí)間的顯示面板(B)。 1.在A中,每當(dāng)你的鼠標(biāo)移動(dòng)到任何一個(gè)元素上,對應(yīng)的html視圖中會給該元素藍(lán)色的背景。
02.png (42.48 KB, 下載次數(shù): 57)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...02
2016-1-10 22:33 上傳
2.如果你單擊選中一個(gè)元素,在A部分的底部,會顯示該元素在html結(jié)構(gòu)中的位置關(guān)系
03.png (32.4 KB, 下載次數(shù): 51)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...03
2016-1-10 22:34 上傳
3.然后在B部分的styles選項(xiàng)中編輯該元素的樣式,并且看到html結(jié)構(gòu)的實(shí)時(shí)更新。
04.png (55.67 KB, 下載次數(shù): 56)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...04
2016-1-10 22:36 上傳
4.在B界面中切換到Event Listeners選項(xiàng),觀察該元素綁定的事件。
05.png (27.7 KB, 下載次數(shù): 62)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...05
2016-1-10 22:37 上傳
click 是事件名稱 .div1 事件是索引名稱(也就是通過什么綁定的) attachment 事件來源 handler里面包含事件的毀掉主體內(nèi)容 useCapture表示該事件是否向上冒泡 5.選中一個(gè)元素,右擊鼠標(biāo),你會看到有一個(gè)彈出窗口出現(xiàn),里面有若干選項(xiàng)。
06.png (43.13 KB, 下載次數(shù): 61)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...06
2016-1-10 22:38 上傳
Break on:為該元素添加dom操作事件監(jiān)聽。包含三個(gè)選項(xiàng)(樹結(jié)構(gòu)改變、屬性改變、節(jié)點(diǎn)移除)。這個(gè)選項(xiàng)的作用是幫助我們監(jiān)控和定位操作元素的代碼。請參看下圖事例:
07.png (46.44 KB, 下載次數(shù): 60)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...07
2016-1-10 22:39 上傳
6.在A界面的彈出選項(xiàng)窗口中選擇node removal,在B界面切換到DOM Breakpoints 選項(xiàng),可以看到有注冊信息。然后我們點(diǎn)擊click me按鈕觸發(fā)刪除div3的事件,可以看到瀏覽器自動(dòng)為我們定位刪除該元素的代碼部分,并且停止執(zhí)行js代碼:
08.png (51.94 KB, 下載次數(shù): 46)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...08
2016-1-10 22:40 上傳
7.在B界面中切換到Properties選項(xiàng),可以看到選中元素的各種信息(英文單詞里面的介紹比較簡單,就不一一介紹了)。
09.png (44.09 KB, 下載次數(shù): 60)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...09
2016-1-10 22:42 上傳
8.點(diǎn)擊A界面的任意地方,按快捷鍵ctrl+F可以看到底部有輸入框,在輸入框中輸入你想要查找的任何內(nèi)容,如果匹配到了,都回在A面板中高亮顯示
10.png (39.87 KB, 下載次數(shù): 52)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...10
2016-1-10 22:43 上傳
9.或者你可以點(diǎn)擊左上角的問號圖標(biāo),然后把鼠標(biāo)移動(dòng)到視圖界面中,對準(zhǔn)元素按下鼠標(biāo)左鍵,對應(yīng)的A界面會定位到選擇的元素。
11.png (48.43 KB, 下載次數(shù): 52)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...11
2016-1-10 22:44 上傳
二、Network
111.jpg (59.95 KB, 下載次數(shù): 57)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...111
2016-1-10 22:45 上傳
222.png (37.77 KB, 下載次數(shù): 54)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...222
2016-1-10 22:45 上傳
2.單擊面板中的任意一條http信息,會在底部彈出一個(gè)新的面板,其中記錄了該條http請求的詳細(xì)參數(shù)header(表頭信息、返回信息、請求基本狀態(tài)---請參看http1.1協(xié)議內(nèi)容對號入座)、Preview(返回的格式化轉(zhuǎn)移后文本信息)、response(轉(zhuǎn)移之前的原始信息)、Cookies(該請求帶的cookies)、Timing(請求時(shí)間變化)
333.png (97.15 KB, 下載次數(shù): 53)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...333
2016-1-10 22:47 上傳
3.在主面板的頂部,有一些按鈕從左到右它們的功能分別是:是否啟用繼續(xù)http監(jiān)控(默認(rèn)高亮選中過)、清空主面板中的http信息、是否啟用過濾信息選項(xiàng)(啟用后可以對http信息進(jìn)行篩選)、列出多種屬性、只列出name和time屬性、preserve log(目前不清楚啥用)、Dishable cahe(禁用緩存,所有的304返回會和fromm cahe都回變成正常的請求忽視cache conctrol 設(shè)定);
444.jpg (27.97 KB, 下載次數(shù): 58)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...444
2016-1-10 22:47 上傳
三、ResourcesResources部分較簡單,主要向我們展示了本界面所加載的資源列表。還有cookie和local storage 、SESSION 等本地存儲信息,在這里,我們可以自由地修改、增加、刪除本地存儲。
555.png (50.93 KB, 下載次數(shù): 64)
下載附件
道勤小編給您詳細(xì)講訴關(guān)于谷歌Chrome瀏覽器或者是360瀏覽器開發(fā)者工具教程—基礎(chǔ)功...555
2016-1-10 22:48 上傳
道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題!
如果您是道勤主機(jī)用戶,那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信:q792472177免費(fèi)電話、后臺提交工單這些方式聯(lián)系道勤主機(jī)客服!
如果您不是我們的客戶也沒問題,點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后,我們?yōu)槟赓M(fèi)進(jìn)行無縫搬家服務(wù),讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)! |