北京赛车 pk10开奖记录_Toyou热购彩票官网
香港高速VIP雲機房火爆上線啦!無需備案靡徑,開通即用!配套《巔雲自助建站系統3.0》將帶給您飛一般的可視化拖拽建站體驗塵,歡迎免費體驗癱。

建站專題

IE8開發人員工具的菜單講解

一佰互聯網站開發設計(www.yinxi.net) 發布日期 2019-04-20 08:54:30 瀏覽數: 20


本篇文章已經簡單的把開發人員工具的各個菜單講解了一遍綿剖。相信廬倆律,大家已經可以簡單的使用起這個強大的工具了垂告臘。

IE8“開發人員工具”使用詳解上(各級菜單詳解)
IE8正式版已經發布了筷且。本篇文章不會非常扯蛋地去進行什麼評測獎僕票,然後給出什麼“Chrome運行JavaScript能力是IE8的15倍”琳隴火、什麼“IE8頁面渲染速度是Safari的2.456倍”刪娜少、什麼“IE8的抗強暴能力比FireFox高出1.235倍” 這樣的操蛋的結論翟。我管誰比誰強多少?我只知道樊表︰當windows7發布的時候嗆,IE8瀏覽器的市場佔有率將讓前台開發人員無法說考︰“不用去管IE8欄敖煩,沒有幾個人在用它”守宮。所以晌,這篇文章將會非常務實的講解一下什劫,IE8中也許是唯一讓開發人員感到親切的“開發人員工具”澄嵌時。同時瓊,我們會延伸一些相關的資料和知識蔡埔。所以懾卿褥,請拋棄你對IE8的偏見氓淳,耐心的看下去吧灰。

你還沒有安裝IE8?

如果你是前端開發人員呢敲,那麼還請你安裝一下這玩意吧黃居。因為正式版已經發布了碑殼。不同于以前的beta版巒色,這次咱得認真的關注一下它了掇沉。去下載並安裝一個吧霧咆壤,下面是下載地址——

IE8中文版下載列表

Windows XP
Windows Vista
Windows Server 2003
Windows Server 2008
Windows XP 64-bit
Windows Vista 64-bit
Windows Server 2003 64-bit
Windows Server 2008 64-bit

IE8英文版下載列表

Windows XP
Windows XP 64 Bit
Windows Vista
Windows Vista 64 Bit
Windows Server 2003
Windows Server 2003 64 Bit
Windows Server 2008
Windows Server 2008 64 Bit

哦僥旗,也許你會擔心魄書,你系統內的IE6或者IE7完蛋了畔霖覓。恩慕盎淮,的確慷摹埔,這有可能胳。但是乾探迫,你可以試試下面的工具脫。它可以讓你多版本的IE共存——IE多版本共存的解決方案——IETester
微軟網頁開發調試利器SuperPreview(附下載)
認識“開發人員工具”

雖然這玩意改了時髦的名字匠憐諱,但是卻也不是什麼新玩意蟹,它的前身是“IEdevtoolbar”滄。但是渭瘦,以前只是IE的一個插件而已灰。而在IE8中口徘,瀏覽器已經自動集成了這玩意蒲變純,不僅改了個有點土鱉的名字潑耗,而且功能也加強了很多戎免先。
開發人員工具在IE8的工具菜單下籃十啦,或者直接點擊F12快捷鍵也可以呼叫出來蠟阿。

在我們介紹它之前 納霧,我們先來說說這玩意到底能做什麼?如果你只是用瀏覽器來瀏覽網站疼,而不用操心頁面是怎麼做出來的季豌惋。那麼我想你已經可以離開這頁面了玖。
總體來說泰噴,開發人員工具就是是為前端開發人員開發頁面而設計的工具阮呂。提供一系列的小工具啊,讓你可以方便的查找頁面的bug滄緘,包括html代碼瓤項、css代碼和JavaScript代碼慨。同時嘎猾淋,他也提供了一些雖然比較雞肋霉,但是還能咂咂味的小工具變搜,例如取色裂胳、屏幕尺子等寫德。
ok位咀錳,我們已經看到它了莢叉響,並且也知道它能干什麼了憚停箔。那就讓我們根據菜單的順序一一來介紹它吧——

本篇文章已經簡單的把開發人員工具的各個菜單講解了一遍僳履。相信汝,大家已經可以簡單的使用起這個強大的工具了堿共。
【文件】菜單

【全部撤銷】
以前在開發人員工具中進行的操作全部取消妒,並且刷新頁面和DOM結構穢許碾。
【自定義Internet Explorer試圖源】
【試圖源】真是操蛋的名詞渾。通俗一點的說法就是勤滴︰“用什麼編輯器查看網頁源文件”乳。例如聯使︰我用的就是EditPlus廁渭都。
【退出】
為了不侮辱閣下的智商熬相,這個我就不多說了敘。嗯蓉,F12是個奇偶快捷鍵僕,這個順便提一下吧噸。
【查找】菜單
單擊選擇元素

快捷鍵Ctrl B伯餒灌,和點擊圖中的那個鼠標ICO按鈕效果一樣霜。最最常用的功能棉寇。也是一個奇偶開關董扦。打開時雞安,用鼠標點擊頁面上的元素時手倆局,就會選中改元素惱退,並且列出改元素的DOM結構費嚎、CSS樣式等信息踩。

例如上面的圖簿擔龜。左邊的區域顯示了此超鏈接元素的DOM信息亂磨。可以明確地看出它的父元素祁據嶺、子元素以及兄弟元素官毀人。
右面的區域顯示了改元素樣式信息撥凳。其中被線劃掉的樣式唉即,表示該樣式因為優先級不夠高南昧,已經不再起作用了濤晚。調試的時候竟,前面的勾可以鉤掉的絛掣,鉤掉的時候表示強行刪除此樣式讕挖犁。而且憐,每個樣式的屬性矢署狼,用鼠標點擊後都可以立即修改慧遂。從而即時的看到修改後的頁面效果騙沙警,非常方便藕。
使用過FireFox的FireBug的朋友燒勿,對此一定不會陌生摳甘壇。區別僅僅是裳︰FireBug是把優先級比較低的樣式排列在下方滌,僅此而已喉芍。

【跟蹤樣式】視圖和【樣式】視圖的作用是一樣的磨播,都是用來看選中元素的樣式信息贛破申。區別僅僅是墟︰它換了個視圖方式而已聊燴。具體習慣哪種視圖紀慫,就看你自己的喜好了襖蠢。

本篇文章已經簡單的把開發人員工具的各個菜單講解了一遍很。相信播康踏,大家已經可以簡單的使用起這個強大的工具了款粟惠。


【布局】視圖可以顯示選中元素的盒裝模型信息倆。雖然相比FireBug可以顯示更多的信息拴,但是我還是比較喜歡FireBug中直接在頁面上用色塊表現出來的方式掀。

【屬性】視圖可以查看選中元素的屬性信息梆。非常令人高興的是泵︰你可以立即增加或者刪除一些屬性芯凡,用來快速的調試頁面鈍。
哦滅壘,對了快。需要注意的是爛︰無論你是在開發人員工具中修改選中元素的樣式還是屬性坍,他們都是暫時的調試而已行覽,並不會正在修改你的網頁源代碼秘贛。
【禁用】菜單

【腳本】
會禁止使用頁面的JavaScript或者VBScript腳本教蔽。為什麼要禁用呢?為了測試頁面的健壯性韭。有些對頁面設計要求比較高的客戶會問萍︰“如果客戶禁用了腳本富,這個頁面還能不能使用呢?”恩哦幻,對鄲幾攜,這個功能就是用來測試這些操蛋客戶的變態需求的紡。
【彈出窗口阻止程序】
彈出窗口的過濾器取。用來測試哪種“怎麼才能讓瀏覽器或者安全軟件不過濾掉我的彈出窗口菱叉。”
【CSS】
“CSS裸奔節”來了!用這里來測試一下你的頁面在CSS裸奔時的姿態吧齡堂歇。這個也是檢驗頁面健壯性和可訪問性的重要測試論腸。雖然怪,現在在中國會訪問網頁的盲人還不是很多壟。

本篇文章已經簡單的把開發人員工具的各個菜單講解了一遍冠。相信瞥,大家已經可以簡單的使用起這個強大的工具了傾喉。
【查看】菜單

【類和ID信息】
快捷鍵是Ctrl I邊級,奇偶開關客秒。打開以後飛,你就會看到頁面上布滿了密密麻麻的紅色色塊破埂。同時會顯示出class名稱或者ID名稱陝。是的墓嘩校,這個就是查看類和ID信息的效果了壕倡蹈。不過說實話啃無,誰會對這一坨坨紅色的大便感興趣?不僅把頁面搞的看上去像個縫滿補丁的乞丐服幾,而且完全看不清楚-_-b...

【鏈接路徑】
和上面一樣匙霉。它會把頁面中的所有超鏈接都會一坨坨的紅色框出來惱瞪弊,並且顯示其鏈接地址靜。

【鏈接報告】
使用鏈接報告功能幻倘,開發人員工具會幫你生成一份此頁面的鏈接報表石栓繳。包含鏈接數量讕蟲蒂、鏈接地址磨、是否新窗口打開等信息管。不過解敞,具體這玩意有什麼用郝。我也不知道拐恨。

【選項卡索引】
高亮顯示出所有包含tabindex屬性的元素漏。tabindex屬性的設置黔狸聘,可以改變網頁元素獲得焦點的順序巍。

本篇文章已經簡單的把開發人員工具的各個菜單講解了一遍憐扭。相信輯,大家已經可以簡單的使用起這個強大的工具了受。
【訪問鍵】
高亮顯示所有包含“accesskey屬性”的元素閡。設置accesskey屬性繡廓,可以設定元素獲得焦點的快捷鍵僵卷。

【源文件】之“帶有樣式的元素源”
生成一份包含選中元素樣式拼懷附、HTML代碼餞雹遂,網頁級別信息的源文件賃娶淒。
必須先選中一個元素囪,此命令才有效陀。而且生成的源文件也只與選中元素有關睫鱗薪。
【源文件】之“DOM(元素)”
快捷鍵是Ctrl T仕灘。生成一份源文件欣陸。此源文件只包含選中元素的DOM結構信息千。用過FireBug的朋友頃壕卑,可以聯想到“拷貝元素HTML代碼”這個命令穗。其實這個和那個差不多偏。只是這個是生成到一個窗口裂,而FireBug直接復制到剪貼板而已姥。
【源文件】之“DOM(頁面)”
快捷鍵Ctrl G潮嘆。生成一份源文件惦杯貶。此源文件包含整個頁面的DOM信息結構病稜。非常操蛋的功能郝,不知道是不是因為bug的原因宮舒,此功能其實就是“查看網頁源碼”稻駕。因為蔥,生成的源碼並不僅僅是DOM信息培揮磷,也包含CSS和腳本信息等就。
【源文件】之“原始狀態”
極其操蛋的功能來,其實就是“查看網頁源碼”寬。大家應該都比較喜歡用鼠標右鍵直接在網頁上點吧設。
【輪廓】菜單

【輪廓】菜單蝦侗,很明顯就是把滿足條件的元素勾畫出來顯示的命令菊帥。
【表單元格】
就是把form表的各個單元格用桔色線框出來磨夾。讓你知道——哦繭。原來這里就是表的單元格呀傳訂。

【表】
就是把form表單用桔色線框出來屆搔。讓你知道——哦鯨。原來這里就是form表單呀揪。
【DIV元素】
就是把頁面中的所有div元素用綠色線框出來實婆。讓你知道——哦駿咎蠍。原來這些都是div元素呀盟量。


本篇文章已經簡單的把開發人員工具的各個菜單講解了一遍堪拒。相信軌拭,大家已經可以簡單的使用起這個強大的工具了爽茄些。
【圖像】
就是把頁面中的所有img元素用紫色線框出來露趣。讓你知道——哦踢。原來這些都是img元素呀瘸莆。

【任何元素】
這個比較強勁了勸分徊。你可以自定義任何標簽和他們要用什麼顏色的線框出來喘堆擠。點擊這個菜單凜富間,會彈出下面的對話框骸穗鵝。很簡單局趕參。不再做說明了奉涵。

【定位元素】之“相對”
會用綠色線框出來羅,所有具有position:relative樣式的元素敲。
【定位元素】之“絕對”
會用黑色線框出來腳暇恆,所有具有position:absolute樣式的元素材。
【定位元素】之“固定”
會用藍色線框出來尖灘,所有具有position:static樣式的元素螞駝。
【定位元素】之“浮動”
會用黃色線框出來潦,所有具有float樣式的元素烯吾攫。
【清除輪廓】
當你的頁面已經被各種顏色的線搞的像Excel表格一樣的時候輪詩,你可以可以使用這個命令來清除所有的線了誓瘟。


本篇文章已經簡單的把開發人員工具的各個菜單講解了一遍謝。相信筐,大家已經可以簡單的使用起這個強大的工具了就唉說。
【圖像】菜單

很明顯翠礙集,這個命令就是控制頁面上各種圖片的腦努。
【禁用圖像】
為了不侮辱你的智商尖,這個就不說了琉坎邏。唯一一點需要說明的是——不僅僅是img元素吹辨洛,而且連元素的背景圖片都會被禁用哦捂桑。
【顯示圖像尺寸】
很不錯的功能委詭。可以不用查看圖片屬性就快速的知道各個圖片的尺寸大脅恰,當然酮那,單位是像素亨熄。

【顯示圖像文件大小】
很不錯的功能喘。可以不用查看圖片屬性就快速的知道各個圖片的文件大新 ,當然鼓情,單位是字節庇淒耙。

【顯示圖像路徑】
很不錯的功能多牆斃。可以不用查看圖片屬性就快速的知道各個圖片的URL路徑患妮,而且還可以復制膩犁。

【顯示Alt文本】
可以顯示出img元素的alt屬性的文本苛。順便說一下童寢陳︰圖片的alt千萬不要進行關鍵字的堆砌騙,否則很容易被認定為SEO過渡優化釁戶。

【查看圖像報告】
生成一份詳細的改頁面的圖像報表綱洽謂。包含每個圖片的非常詳盡的信息襄核獨。


本篇文章已經簡單的把開發人員工具的各個菜單講解了一遍亥港。相信肛辜,大家已經可以簡單的使用起這個強大的工具了肅酚乾。
【緩存】菜單

管理緩存和Cookie的菜單組匠困徑。對于開發人員來說這個將會是非常令人歡喜的功能豹。
【始終從服務器中刷新】
好像很高深的命令一樣赴。其實換句話說就是骨彌︰“禁止使用瀏覽器緩存”紉。
【清除瀏覽器緩存】
快捷鍵Ctrl R味省。沒啥好說的亢突耙,只是簡化了以前的操作步驟而已柬。
不知道你注意到菜單中【清除瀏覽器緩存】後面有三個點沒有蹈。這個表示科疙默,點擊此菜單後會確認對話框覽繞廊。
【清除此域的瀏覽器緩存】
快捷鍵Ctrl D襄。沒啥好說的四弦盛,只清除本域下的瀏覽器緩存等勾屑。
【禁用Cookie】
沒有什麼好處說琳岡。不讓吃餅干了文勸獸。
【清除會話Cookie】
清除瀏覽器所有的Cookie宿。你的論壇呀同瘦冗,社區呀都等著重新登陸吧每略。
【清除域的Cookie】
只清除本域下的Cookie鳳票。
【查看Cookie信息】
查看此頁面包含的Cookie信息彪霓。想都別想傻,密碼你是得不到的籮慌。
【工具】菜單

開發人員工具附送的一些很有用的小工具操攔頸,雖然相比其他專門的相關工具有點弱停刀兌。但是應急還是足夠的枷。
【重新調整大小】
非常有用的小工具膜。可以快速的將瀏覽器窗口調整到相關的尺寸鏈。這樣輝曹七,測試網頁分辨率兼容性的時候就方便多了保殘。
【顯示標尺】
一個簡單的標尺工具兩竭娃。使用它可以度量長度衫、距離等信息覓佰垂。線的顏色是可以換的緘苗吵。也可以創建多個標題稼。如果太細為的地方筷察,可以使用放大鏡功能乏遣揉。

【顯示顏色選取器】
一個簡單的拾色工具外。點擊鼠標就可以選中顏色鱗貌。不過訟,我向你推薦另外一個工具——《我的工作工具箱——抓色工具(ColorPic)》澆熾,相比之下遍撕,開發人員工具中的這個就太簡單了幌。


本篇文章已經簡單的把開發人員工具的各個菜單講解了一遍滄瘓。相信苫,大家已經可以簡單的使用起這個強大的工具了瓷防禿。
【驗證】菜單

必將引起江湖腥風血雨(謝謝小七同學提醒我這個突然忘記了的成語家,唉∼可能最新看的武俠小說比較少的緣故吧咸。但是最近好像對“嬌喘連連”這類成語比較熟)的菜單燙。不久的將來必將產生無數的孔乙己路攘。
【HTML】
驗證頁面的HTML代碼嘲阿卯。會將本頁面發送到w3c的html驗證工具倘糯勿,並得到驗證報表醋紗藤。
【CSS】
驗證頁面的CSS代碼江含。會將本頁面發送到w3c的css驗證工具嫁,並得到驗證報表琉。
【源】
驗證頁面的源文件代碼捌。會將本頁面發送到feedvalidator.org驗證工具屜撂,並得到驗證報表拾暗。
【鏈接】
驗證頁面的鏈接卡欽。會將本頁面發送到w3c的驗證工具泛摳輯,並得到驗證報表肅眯。
【本地HTML】
打開w3c的html驗證工具跑贍煉,對本地的頁面進行驗證擱。
【本地CSS】
打開w3c的CSS驗證工具怯孝汕,對本地的頁面進行驗證勤。
【輔助功能】之“WCAG清單”
驗證頁面的WCAG(Web Content Accessibility Report-頁面的可訪問性)面獸輪。會將本頁面發送到contentquality.com驗證工具糙,並得到驗證報表貿。
【輔助功能】之“第508條清單”
驗證頁面的508 Standards杏。會將本頁面發送到contentquality.com驗證工具律,並得到驗證報表鵲。
【多個驗證】
同時驗證對頁面進行多個規範的驗證吻淺健。

對于頁面的驗證班賃聖,我想說兩句矯柯團︰其實頁面是不是一樣要通過驗證才能上線呢?我個人感覺完全沒有必要理千睡。如果你是學生頓,躺在象牙塔里面盾。你可以隨便怎麼折騰你的頁面董,因為你就是客戶啤滄,你就是有時間藹圍熄。但是商業項目精偏盆,完全沒有必要為了一個“PASS”而浪費寶貴的項目資源慘隴妓。因為沒有哪個客戶會在乎“你看卜,我做的這個頁面是經過w3c多方面驗證的翹。”如果真的有客戶在乎了繁,那麼我只能說熾,我很崇拜你的“忽悠”能力嗎。

敬請期待下一集

本篇文章已經簡單的把開發人員工具的各個菜單講解了一遍層。相信駒擋,大家已經可以簡單的使用起這個強大的工具了采疲。
但是更為強大的功能券撬控,我們還完全沒有講到摧槽米。所有瓣收,請期待我們下一篇文章吧猛忿達。下一篇文章具搓,將會詳細的講解JavaScript調試份吹、瀏覽器模式淨鵑、文本模式等功能的使用汐仟。

TAG標簽紗恃痴︰ IE8開發人員工具的菜單講解  
一佰互聯是全國知名建站品牌服務商,我們有九年網站建設判媽、網站制作爍誓圈、網頁設計畔、php開發和域名注冊及虛擬主機服務經驗虱洽,提供的自助建站服務更是全國有名桶偽。近年來還整合團隊優勢自主開發了可視化多用戶”巔雲建站系統“3.0平台版蕩娥離,拖拽排版網站制作設計伶厘,輕松實現pc站靛嘆甫、手機微網站烷、小程序壕、APP一體化全網營銷網站建設 我脊,已成功的為全國上百家網絡公司提供自助建站平台搭建服務吠。

相關新聞more

01
05月
PHP學習一(基礎)第1/2頁

WEB的應用 當客戶端向服務器的程序提出請求時搐,web服務器根據請求響應對應的頁面趟虜梆,當頁面中含有PHP腳本時抒功,服務器會交給PHP解釋器進行解... >>詳情

20
04月
HTML5離線應用與客戶端存儲的實現

支持離線 Web 應用開發是 HTML5 的另一個重點騾。所謂離線 Web 應用腥坍,就是在設備不能上網的情況下仍然可以運行的應用淑鋅妮。開發離線Web... >>詳情

19
04月
打造有可預期的盈利模式的網站

思考這個問題私等拈,顯然是為了圖蟲茫娠,有感于幾個月前zhucheng對我說皮︰“一定要做得跟別的網站很不一樣才能吸引人”;有感... >>詳情

22
04月
div css命名規範 css class命

搜索引擎優化(seo)有很多工作要做涉柑奢,其中對代碼的優化是一個很關鍵的步驟冬藉。為了更加符合SEO的規範郝, 下面是目前流行的CSS+DIV的命名規... >>詳情

營業執照. cdn加速服務 備案系統認證 網絡安全協會 我們的支付方式AAA認證

7x24小時服務電話:18581389571 傳真:023-85725751 免費建站交流群礙︰236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 網站投訴:
重慶楚捷科技有限公司 一佰互聯©版權所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保護,網站法律顧問令板︰ITLAW-莊毅雄律師
中華人民共和國信息產業部網站備案號:渝ICP備12000592號
北京赛车pk10开奖 pk10