您好,現(xiàn)在冰冰來為大家解答以上的問題。f12開發(fā)人員工具喚醒方法，f12開發(fā)人員工具相信很多小伙伴還不知道,現(xiàn)在讓我們一起來看看吧！

1、F12 開發(fā)人員工具是一套按需采用的工具，內(nèi)建于 Windows Internet Explorer 9 的每次安裝之中。

2、網(wǎng)站開發(fā)人員可以隨時在任何網(wǎng)頁上使用 F12 工具，從而快速調(diào)試 JavaScript、HTML 和級聯(lián)樣式表 (CSS)，還可以跟蹤并查明網(wǎng)頁或網(wǎng)絡(luò)的性能問題。

3、F12的存在要求程序開發(fā)人員重要的數(shù)據(jù)不能寫在HTML頁面中，要寫在一般處理程序或者后臺中，不然很容易被用戶知道比如密碼之類的。

4、對WEP開發(fā)人員有利的地方就是可以參照別人網(wǎng)站的布局樣式等來構(gòu)思自己的網(wǎng)站。

5、因?yàn)镕12可以看到網(wǎng)站的布局、樣式、js等代碼哦！使用“HTML”選項(xiàng)卡“HTML”選項(xiàng)卡視圖在由內(nèi)存中的 Windows Internet Explorer 9 呈現(xiàn)的樹視圖中顯示你的網(wǎng)頁的動態(tài)標(biāo)記。

6、它反映打開 F12 時的 DOM，如果有任何更改，則需要刷新。

7、 你可以使用鼠標(biāo)或鍵盤直接在樹視圖中導(dǎo)航，以及查看特性和更改值。

8、若要跳轉(zhuǎn)到網(wǎng)頁上的特定元素，請按 Ctrl+B，或單擊“單擊選擇元素” 按鈕。

9、在網(wǎng)頁上，當(dāng)你將鼠標(biāo)懸停在元素上方時將突出顯示相應(yīng)的元素。

10、單擊某個元素時，將在 HTML 視圖中突出顯示 DOM 樹中對應(yīng)的節(jié)點(diǎn)。

11、在“HTML”選項(xiàng)卡中選擇一個元素時，可使用“視圖”>“源”菜單在你的視圖中篩選出按照元素關(guān)聯(lián)的 CSS 樣式或僅按照元素本身選擇的元素。

12、“帶有樣式的元素源”按鈕僅在新窗口中顯示選定元素的 HTML 源及其內(nèi)容，以及適用于它的 CSS。

13、這有助于只關(guān)注選定元素的源文件。

14、必須首先使用“HTML”選項(xiàng)卡視圖選擇 DOM 樹的主體內(nèi)的某個 HTML 元素，然后才可以運(yùn)行此命令。

15、若要選擇某個元素，可單擊“單擊選擇元素”按鈕，或在 DOM 樹中單擊某個元素。

16、當(dāng)你使用“單擊選擇元素”時，首先刷新視圖是個不錯的主意。

17、若要展開或折疊某個元素的屬性，請單擊用加號 (+ ) 或減號 (-) 標(biāo)記的框。

18、HTML 和 CSS 視圖中的所有元素都是可編輯的，并且編輯操作會立即生效。

19、通過單擊元素名稱旁邊的復(fù)選框，可以打開或關(guān)閉樣式規(guī)則和特性。

20、查看動態(tài) HTML 代碼大多數(shù)網(wǎng)站使用動態(tài)代碼。

21、客戶端腳本通常用于生成用戶可以看到的呈現(xiàn)的 HTML。

22、靜態(tài) HTML 代碼的數(shù)量通常很少，僅用于在頁面上啟動操作。

23、由于 F12 工具將顯示呈現(xiàn)在瀏覽器中的 HTML 和 CSS 代碼，而不是顯示嚴(yán)格的 HTML 源，因此查找錯誤更容易一些。

24、“HTML”選項(xiàng)卡顯示 DOM 的當(dāng)前狀態(tài)，而不會自動跟蹤更改。

25、如果你更改了某個值或特性，但它沒有立即顯示，請?jiān)凇癏TML”選項(xiàng)卡中按 F5 刷新視圖。

26、更改值和添加特性F12 工具允許你更改幾乎任何特性或?qū)傩缘闹怠?/p>

27、從“HTML”選項(xiàng)卡內(nèi)，從 DOM 樹中選擇一個元素或使用“單擊選擇元素”按鈕選擇一個元素。

28、在屬性視圖（右窗格）中，單擊一個值以突出顯示并更改它。

29、例如，在 Internet Explorer 9 中打開如何使用 CSS3 添加圓角中的 CSS 示例頁面并且按 F12 可打開該工具。

30、單擊“單擊選擇元素”按鈕 ，然后單擊栗色的 Now in stock at Fourth Coffee 標(biāo)題。

31、 在屬性窗格中，單擊"h2"選擇器下的顏色特性。

32、 鍵入一個新的顏色名稱或值，如 blue，然后按 Enter。

33、標(biāo)題的顏色將立即更改。

34、要添加特性，請右鍵單擊“HTML”或“CSS”選項(xiàng)卡的左窗格中的元素，然后單擊上下文菜單中的“添加屬性”。

35、你需要知道該特性的格式（如"background-color:"）和正確值。

36、若要刪除某個特性（你添加的特性或現(xiàn)有特性），請?jiān)谟掖案褚晥D中單擊該特性，然后按 Delete 鍵。

37、對于原始頁中的特性，可通過刷新網(wǎng)頁恢復(fù)它們。

38、添加的特性需要重新應(yīng)用。

39、如果你只希望在某個會話期間臨時關(guān)閉某個特性，則在“HTML”或“CSS”選項(xiàng)卡的右窗格中清除該特性旁邊的復(fù)選框。

40、“HTML”選項(xiàng)卡視圖和工具在左窗格樹視圖中選擇一個元素時，你可以在右側(cè)查看和更改所選元素及其子元素的樣式、框模型布局和特性。

41、 你所做的更改不是永久的，當(dāng)你刷新或打開另一個頁面時這些更改會丟失。

42、但是，你可以通過單擊“保存”按鈕來保存你的 HTML 代碼。

43、當(dāng)你查看應(yīng)用于“樣式”和“跟蹤樣式”選項(xiàng)卡中所選元素的多個 CSS 規(guī)則時，將根據(jù) CSS 規(guī)范，基于這些規(guī)則的專一性來顯示它們。

44、列表頁首的規(guī)則將第一個應(yīng)用到所選元素，而底部的規(guī)則是當(dāng)前定義所選元素的樣式屬性的規(guī)則。

45、這些規(guī)則的值是可編輯的，方法為：單擊某個值，鍵入新值，然后按"Enter"。

46、更改會立即在網(wǎng)頁上顯示。

47、這兩個屬性類型中的信息是相同的。

48、但在“跟蹤樣式”屬性類型中，相同的信息按照屬性（在其下面顯示規(guī)則）分組。

49、這些屬性按字母順序列出，并基于專一性再次對規(guī)則排序。

50、樣式 顯示你在樹視圖中選擇的元素的規(guī)則和樣式。

51、它按規(guī)則進(jìn)行組織，并包含繼承的特性和重寫的特性。

52、跟蹤樣式 顯示與樣式相同的信息，但是按屬性而不是規(guī)則分組。

53、布局 顯示所選元素的框模型。

54、通過單擊圖表中的相應(yīng)值，可更改“布局”視圖中的任意值。

55、“布局”選項(xiàng)卡對可縮放矢量圖形 (SVG) 元素禁用。

56、特性 顯示選定元素的特性，如 ID。

57、可以添加或刪除特性右鍵單擊“HTML”選項(xiàng)卡上的菜單如前面所述，可在“HTML”選項(xiàng)卡的左窗格中右鍵單擊一個元素。

58、下面是你可以在“HTML”選項(xiàng)卡中使用的選項(xiàng)。

59、菜單項(xiàng)作用添加特性 向標(biāo)記或元素中添加新的特性。

60、 復(fù)制 將標(biāo)記和特性復(fù)制到剪貼板中。

61、 復(fù)制 InnerHTML 將元素的 InnerHTML 內(nèi)容（子文本、元素和特性）復(fù)制到剪貼板。

62、 復(fù)制 OuterHTML 將元素的 OuterHTML 內(nèi)容（子文本、元素和特性）復(fù)制到剪貼板。

63、 如果在“HTML”選項(xiàng)卡中單擊某個元素的子節(jié)點(diǎn)，如"h2"標(biāo)記的文本元素，則可能無法獲得所有選項(xiàng)。

64、如果你未看到所需的選項(xiàng)，則轉(zhuǎn)到父元素并重試。

65、檢查 CSS 規(guī)則“CSS”選項(xiàng)卡顯示你的樣式表之間的相互影響。

66、此選項(xiàng)卡對于使用多個樣式表的網(wǎng)站很有用。

67、若要在樣式表之間切換，可使用樣式表選擇器。

68、當(dāng)你選擇某個樣式表時，左窗格中將顯示規(guī)則及其相關(guān)樣式屬性。

69、默認(rèn)情況下，此按鈕顯示在網(wǎng)頁中引用的第一個樣式表。

70、如果有多個樣式表正在網(wǎng)頁上使用，則單擊下拉列表以選擇其他樣式表。

71、“CSS”選項(xiàng)卡上的快捷菜單選項(xiàng)當(dāng)你右鍵單擊“CSS”選項(xiàng)卡時，快捷菜單將會提供比“HTML”選項(xiàng)卡更多的選項(xiàng)。

72、啟用的選項(xiàng)是上下文相關(guān)的，并取決于你在“CSS”選項(xiàng)卡中單擊的位置。

73、菜單項(xiàng)作用右鍵單擊的位置添加特性 向標(biāo)記或元素中添加新的特性。

74、 在規(guī)則或特性（任何元素）上。

75、 添加規(guī)則 添加選擇器、聲明或樣式。

76、 在白色區(qū)域中，而不是在現(xiàn)有元素上。

77、 后加規(guī)則 在當(dāng)前規(guī)則之后添加選擇器或規(guī)則。

78、 在任何元素上。

79、 前加規(guī)則 在當(dāng)前規(guī)則之前添加選擇器或規(guī)則。

80、 在任何元素上。

81、 刪除特性。

82、 刪除選定的特性。

83、 在任何特性上。

84、 刪除規(guī)則 刪除選定的規(guī)則和所有相關(guān)的特性。

85、 在任何規(guī)則或選擇器上。

86、 在“CSS”選項(xiàng)卡中更改數(shù)字 CSS 值CSS 屬性的值可以像 F12 工具中的幾乎任何其他屬性一樣進(jìn)行更改。

87、通過單擊屬性值并鍵入新值，可以更改 CSS 屬性。

88、在“CSS”選項(xiàng)卡中，還可使用向上鍵和向下鍵增加或減小數(shù)值。

89、搜索和保存更改像 F12 工具中的其余選項(xiàng)卡一樣，你可以使用“搜索”框在“HTML”和“CSS”選項(xiàng)卡中搜索特定標(biāo)記、屬性、特性或值。

90、單擊“搜索”按鈕時，將突出顯示搜索關(guān)鍵字的所有實(shí)例，并且窗格會滾動到顯示第一個匹配項(xiàng)。

91、 如果存在多個匹配項(xiàng)，則可使用“下一個”和“上一個”按鈕向前和向后滾動。

92、你所做的更改（例如，調(diào)整框模型或添加特性）不是永久的。

93、當(dāng)你在瀏覽器中重新加載頁面或?qū)Ш降狡渌W(wǎng)頁時，你所做的任何更改都會丟失。

94、若要保存對 HTML/CSS 文件的本地副本的更改，請單擊左窗格上的“保存”按鈕。

本文就為大家分享到這里，希望小伙伴們會喜歡。