性视频亚洲_超碰在线中文字幕_久久影院亚洲_亚洲com_精品久久网站_亚洲娇小与黑人巨大交

新聞動(dòng)態(tài)
簽約信息
公司信息
行業(yè)資訊

瀏覽器的“審查元素”功能大放異彩

 發(fā)布時(shí)間:2018-09-21     瀏覽次數(shù):2.8k     作者:斑驢互聯(lián)

可能大家對(duì)瀏覽器的審查元素有所耳聞,那你知道它可以做些什么嗎?今天斑驢互聯(lián)小編就來(lái)告訴你瀏覽器的“審查元素”有什么厲害的功能?
大家知道網(wǎng)頁(yè)編輯要依靠專(zhuān)用的編程工具或使用DreamWeaver、FrontPage可視化軟件。最簡(jiǎn)單的Word也能編制網(wǎng)頁(yè),提供瀏覽器閱讀。而要分析或調(diào)試網(wǎng)頁(yè)代碼,也需要用這些工具來(lái)完成。在人們的印象中,網(wǎng)絡(luò)瀏覽器知識(shí)一個(gè)代碼翻譯和提供閱讀界面的角色。如今,隨著Chrome核心瀏覽器的推廣使用,價(jià)值微軟新推出的網(wǎng)絡(luò)瀏覽器Edge的不斷開(kāi)發(fā)利用,瀏覽器已經(jīng)不光知識(shí)提供閱讀這樣一個(gè)簡(jiǎn)單的功能,它們還具有“元素審查”和代碼調(diào)試等功能,在網(wǎng)頁(yè)編程調(diào)試方面也越來(lái)越發(fā)揮著更多的作用。
不單單是Chrome “審查元素”遍地開(kāi)花
在Windows 10自帶的Edge瀏覽器頁(yè)面內(nèi)單擊鼠標(biāo)右鍵,在彈出的快捷菜單中,你會(huì)發(fā)現(xiàn)一個(gè)“檢查元素”的項(xiàng)目(圖1)。這在以前的傳統(tǒng)瀏覽器中是未曾見(jiàn)到的。那么,其他瀏覽器中是否存在這個(gè)選項(xiàng),它是干什么用的?我們?cè)谧钚掳娴乃压窞g覽器內(nèi)的右鍵菜單中,也發(fā)現(xiàn)有一個(gè)“審查元素”的項(xiàng)目(圖2)。大家知道,搜狗瀏覽器目前采用的是Chromium+Trident內(nèi)核,其中也有基于谷歌Chromium的內(nèi)核。而最新版的360安全瀏覽器,也采用谷歌的Chromium內(nèi)核,同樣有這個(gè)“審查元素”的選項(xiàng)。而作為最正宗的Chromium內(nèi)核的瀏覽器,谷歌Chrome網(wǎng)絡(luò)瀏覽器中的“檢查元素”功能更是原生的,只不過(guò)它的名稱(chēng)是“檢查”(快捷鍵為Ctrl+Shift+I)(圖3)。


http://www.chuanyouhg.cn/storage/uploads/20180921/fd39eae41b74086c590a513c726e8981.png

     (圖1)

http://www.chuanyouhg.cn/storage/uploads/20180921/e9b8f5fed265851575f1a0a2fbeac78f.jpg

(圖2)

http://www.chuanyouhg.cn/storage/uploads/20180921/fc58a75689324300309fb8bf878c0983.jpg

(圖3)


根據(jù)專(zhuān)業(yè)詞條解釋?zhuān)皩彶樵亍笨晒╅_(kāi)發(fā)者獲得網(wǎng)頁(yè)各種元素的加載時(shí)間、Javascript函數(shù)、Object等信息,可以做到定位網(wǎng)頁(yè)元素、實(shí)時(shí)監(jiān)控網(wǎng)頁(yè)元素屬性變化的功能,可以及時(shí)調(diào)試、修改、定位、追蹤檢查、查看嵌套,修改樣式和查看JS動(dòng)態(tài)輸出信息。可見(jiàn),它是針對(duì)網(wǎng)頁(yè)構(gòu)成的后臺(tái)代碼和屬性來(lái)說(shuō)的一個(gè)概念,雖然對(duì)于普通使用網(wǎng)頁(yè)的用戶(hù)來(lái)說(shuō)并沒(méi)有多少實(shí)際意義,然而對(duì)于網(wǎng)頁(yè)調(diào)試和編程的創(chuàng)作者來(lái)說(shuō),提供這樣一個(gè)便利性十足的東西就很有必要了。細(xì)心挖掘,對(duì)普通用戶(hù)其實(shí)也可另有別用。
“審查元素”的雙開(kāi)關(guān)
在Edge瀏覽器中,如果需要進(jìn)入程序的調(diào)試狀態(tài),除了從右鍵菜單命令中選擇“檢查元素”外,你還可以直接在瀏覽器頁(yè)面內(nèi)隨時(shí)按下F12功能鍵來(lái)完成這項(xiàng)工作。以往,我們常常在電腦基礎(chǔ)培訓(xùn)班中聽(tīng)老師說(shuō),F(xiàn)12功能鍵沒(méi)有什么用途,現(xiàn)在它終于派上了合適的用場(chǎng)。
“審查元素”具體用法
如果對(duì)“審查元素”概念中專(zhuān)業(yè)術(shù)語(yǔ)的描述有點(diǎn)不太理解,那么,還可以理解為通過(guò)“審查元素”來(lái)解讀一個(gè)網(wǎng)頁(yè)的內(nèi)涵,觀察不同代碼對(duì)最終視覺(jué)效果所產(chǎn)生的變化,此外還可以修改網(wǎng)頁(yè)的樣式。這樣對(duì)普通用戶(hù)可能更好理解一些。
解讀網(wǎng)頁(yè)。打開(kāi)“審查元素”代碼窗口之后,點(diǎn)擊工具欄中部的DOM元素突出顯示按鈕,將鼠標(biāo)移動(dòng)到窗格的不同代碼段之后,發(fā)現(xiàn)網(wǎng)頁(yè)的對(duì)應(yīng)部分會(huì)被高亮選中。這說(shuō)明你當(dāng)前選擇的代碼正好對(duì)應(yīng)于網(wǎng)頁(yè)中被標(biāo)亮的部分。反過(guò)來(lái),如果要查明網(wǎng)頁(yè)中某個(gè)部分是如何設(shè)計(jì)的,那么,只需查看代碼窗口中光標(biāo)所在段落的對(duì)應(yīng)代碼,仔細(xì)研究,就可以很快學(xué)到此部分網(wǎng)頁(yè)效果的實(shí)現(xiàn)方法了(圖4)。


http://www.chuanyouhg.cn/storage/uploads/20180921/2847cdb34c2d4ef22cd4530617f9805d.jpg

(圖4)


小技巧:
如果覺(jué)得審查元素窗口占據(jù)了瀏覽器主頁(yè)面,給對(duì)比調(diào)試帶來(lái)了不便,那么,還可以執(zhí)行分屏放置,將網(wǎng)頁(yè)和審查代碼窗口分立與屏幕的左右兩側(cè)。具體實(shí)現(xiàn)方法是,點(diǎn)擊審查窗口標(biāo)題欄右上角的“Undock into separate window”按鈕,先使得網(wǎng)頁(yè)窗口和代碼窗口分離,然后拖動(dòng)兩個(gè)窗口的標(biāo)題欄,分別“丟”向屏幕的兩側(cè),這樣就可以獲得更多的空間進(jìn)行對(duì)比測(cè)試了(圖5)。


http://www.chuanyouhg.cn/storage/uploads/20180921/6b529766dc5b8555b28c4679e37cde7b.jpg

(圖5)


利用內(nèi)容。有時(shí)我們發(fā)現(xiàn)網(wǎng)頁(yè)中的某些內(nèi)容不允許被選中,想要復(fù)制卻無(wú)法完成。這時(shí),我們可以借用“審查元素”窗口,找到網(wǎng)頁(yè)中要復(fù)制內(nèi)容所對(duì)應(yīng)的內(nèi)容段落,右鍵單擊之后選擇“復(fù)制”即可將網(wǎng)頁(yè)中受限的文本或其他內(nèi)容,以無(wú)需重新設(shè)置格式的方式復(fù)制下來(lái),供其他編輯器利用(圖6)。


http://www.chuanyouhg.cn/storage/uploads/20180921/20840e4eaf14249e883b48700b45239a.jpg

(圖6)


修改網(wǎng)頁(yè)。在代碼中,你也可以修改一些內(nèi)容,修改內(nèi)容之后,網(wǎng)頁(yè)效果會(huì)在你的電腦中顯示出來(lái)。但是,如果其他人訪問(wèn)這個(gè)網(wǎng)頁(yè),卻不會(huì)顯示你修改的內(nèi)容,也就是說(shuō),你修改的內(nèi)容只在你個(gè)人電腦上有效。不過(guò),在Edge瀏覽器中,有一個(gè)網(wǎng)頁(yè)標(biāo)注和分享功能,如果你修改了網(wǎng)頁(yè),并通過(guò)分享功能分享了自己標(biāo)注或修改的網(wǎng)頁(yè)(圖7),別人也是可以看到的,這又該另當(dāng)別論了。


http://www.chuanyouhg.cn/storage/uploads/20180921/258bed980ca5989cdd1b47d39385b1fe.jpg

(圖7)


用“審查元素”保存圖片
有的網(wǎng)頁(yè)屏蔽了圖片“另存為”功能,在使用Chrome內(nèi)核的網(wǎng)絡(luò)瀏覽器時(shí)候,如果遇到這種問(wèn)題,可以右鍵點(diǎn)擊圖片并選擇“審查元素”,找到此圖片的源位置另存。將鼠標(biāo)放在要審查的圖片上,點(diǎn)擊右鍵并選擇“審查元素”,點(diǎn)擊CLASS名稱(chēng),找到要審查的DIV(圖8)。將鼠標(biāo)指針?lè)旁贑SS樣式文件上,將會(huì)彈出該CSS文件的路徑。要找到圖片的路徑,只需將鼠標(biāo)在圖片樣式上右鍵,打開(kāi)新的窗口,這里就可以發(fā)現(xiàn)圖片路徑,看到的域名后面就是圖片路徑了。


http://www.chuanyouhg.cn/storage/uploads/20180921/62f28c9c8293e9d473590162a4aca84c.jpg

(圖8)

標(biāo)簽: 南昌網(wǎng)站建設(shè)公司/南昌做網(wǎng)站的公司/南昌微信小程序/南昌APP開(kāi)發(fā)/—斑驢互聯(lián)

分享本文
每個(gè)作品都是一次思維與靈魂的碰撞
斑驢互聯(lián)在南昌一直向著“做業(yè)內(nèi)一流互聯(lián)網(wǎng)設(shè)計(jì)團(tuán)隊(duì)”這一愿景努力,不斷提升對(duì)網(wǎng)站高端設(shè)計(jì),微信公眾號(hào)/小程序開(kāi)發(fā)等產(chǎn)品的用戶(hù)體驗(yàn)
400 0791 158
主站蜘蛛池模板: 国产区在线视频 | 国产成人毛片无码视频软件 | 18禁黄无码免费网站高潮 | 一本色道久久综合亚洲精品按摩 | 一级黄色毛片免费 | 午夜日韩av| 中文字幕极速在线观看 | 国产午夜精品无码一区二区 | 97在线观看免费版高清 | xxx国产在线观看 | 免费麻豆国产一区二区三区四区 | 午夜精品成人一区二区 | 成人在线播放视频 | 最新中文字幕AV无码不卡 | 美女av在线免费 | 国产亚洲毛片 | 大地资源影视中文在线观看免费高清 | 一区两区三区四区乱码国产精品 | 欧美v亚洲v综合v国产v | 成人在线视频看看 | 免费看中国毛片 | 亚洲午夜高清国产拍 | 99久久无色码中文字幕人妻 | 欧美无砖专区一中文字 | 狠狠干2019| 国产第一福利网 | 在线观看视频国产一区 | 三大高傲校花被调教成奴游戏 | 无码任你躁x7x7x7x7在线观看 | 久久久青青躁a∨免费观看 50岁四川熟女A片 | 最新伦敦金属行情 | 久久国产精品视频一区 | 成人免费片库 | 中国A级毛片免费观看 | 91popny丨九色丨蝌蚪 | 日本免费网站 | 三年成全免费观看西瓜 | 高潮videossex潮喷 | 99久久精品国产片果冻的功能特点 | 大尺度裸体日韩羞羞xxx | 久久无码色综合中文字幕 |