Firebug快速入門(二)

2021-08-23 13:41:05 字數 3543 閱讀 2587

firebug常用自帶函式: 命令

說明$(id)

通過id返回element。

$$(selector)

通過css選擇器返回element陣列。

$x(xpath)

通過xpath表示式返回element陣列。

dir(object)

列出物件的所有屬性,和在dom標籤頁檢視該物件的是一樣的。

dirxml(node)

列出節點的html或xml的源**樹,和在html標籤頁檢視改節點一樣。

cd(window)

預設情況下,命令列相關的是頂層window物件,使用該命令可切換到frame裡的window獨享。

clear()

清空資訊顯示區,和單擊按鈕clear功能一樣。

inspect(object[, tabname])

監視乙個物件。tabname表示在那個標籤頁對該物件進行監視,可選值為「html」、「css」、「script」和「dom」。

keys(object)

返回由物件的屬性名組成的陣列。

values(object)

返回由物件的屬性值組成的陣列。

debug(fn)

在函式的第一行增加乙個斷點。

undebug(fn)

移除在函式第一行的斷點。

monitor(fn)

跟蹤函式fn的呼叫。

unmonitor(fn)

不跟蹤函式fn的呼叫。

monitorevents(object[, types])

跟蹤物件的事件。types的可選值為「composition」、 「contextmenu」、 「drag」、 「focus」,、「form」、「key」、 「load」、「mouse」、「mutation」、「paint」、「scroll」、「text」、「ui」和「xul」。

unmonitorevents(object[, types])

不跟蹤物件的事件。types的可選值為「composition」、 「contextmenu」、 「drag」、 「focus」,、「form」、「key」、 「load」、「mouse」、「mutation」、「paint」、「scroll」、「text」、「ui」和「xul」。

profile([title])

開始對指令碼進行效能測試,可選引數title將作為測試結果的標題。

profileend()

結束指令碼效能測試。

三、html檢視器

單擊功能區第二欄的「html」標籤可切換到源**檢視功能。雖然firefox也提供了檢視頁面源**的功能,但它顯示的只是頁面檔案本身的源**,通過指令碼輸出的html原始碼是看不到。而firebug則是所見即所得,是最終的源**(包括執行時js自動生成的html標籤,這些是在ff自帶html檢視器或是ie的「檢視頁面原始碼」裡看不到的)。

資訊區被分成了兩個部分,左邊是顯示源**,右邊是乙個功能區,可以從這裡檢視到html element中的css定義、布局情況和dom結構。

在源**上移動滑鼠,頁面就會出現乙個半透明的方塊,指示當前滑鼠所指源**的顯示區域。如將滑鼠放到上圖時,頁面相應位置被方塊選中

如果選擇「檢視」,功能正好相反,在頁面中移動滑鼠,則當前顯示區域的源**會被加亮顯示出來。

此外當我的源**很多,而且有些區域在頁面中不方便滑鼠指定時,可以利用搜尋功能查詢

1.單擊原始碼標籤部分,在彈出的編輯框裡進行編輯,按tab可以切換需要編輯的屬性

2. 後單擊功能區第一行的「編輯」按鈕或者直接將滑鼠移動到要修改的element上,單擊滑鼠右鍵,選擇「edit html.」進行編輯

3. 修改元素的css,選擇該element,然後在右邊的視窗選擇「樣式」標籤,這裡顯示的就是當前element的css定義了。我們在這裡可以對css定義進行新增、編輯、刪除、禁止等操作。可以單擊右鍵選擇操作,也可以單擊元素前面的圈禁用,單擊元素體進行編輯。tab可以切換要編輯的元素。

4. 修改元素的布局(margin、border、padding),firebug提供乙個視覺化編輯器,我們將右邊的區域切換到「布局」標籤,你會看到乙個盒子模型,裡面從外到裡通過不同的線和顏色劃分出了offset、margin、border、padding和內容五個區域,裡面4個區域在每個邊上都有1個數值,表示該方向上的調整值。

四、css檢視器

將功能區第二行的標籤切換到「css」,在這裡我們可以檢視頁面中所有的css定義,包括鏈結的css檔案。通過功能區的檔案選擇按鈕可以選擇不同的含有css的檔案

css的定義的編輯這裡就不再說明了,這個可以參考html的「style」操作。

「edit」按鈕功能和html的「edit」功能類似。

五、指令碼除錯

將功能區第二行的標籤切換到「指令碼」,在這裡我們可以對頁面中所有的指令碼進行除錯,包括鏈結的指令碼。和css一樣,可以通過檔案選擇按鈕選擇不同的指令碼檔案。

六、dom檢視器

將功能區第二行的標籤切換到「dom」可俺層次檢視整個頁面的dom結構。通過「options」選單可自定義選擇檢視使用者自定義屬性(show user-defined properties)、使用者自定義函式(show user-defined functions)、dom屬性(show dom properties)、dom函式(show dom functions)或dom常數(show dom constants)等內容。

二 快速入門

一 springboot預設埠號為8080 在沒有主啟動類的情況下 package com.dudu.service import org.springframework.boot.autoconfigure.enableautoconfiguration import org.springfram...

Flask入門二 快速入門

from flask import flask 路由裝飾器 defhello world 檢視函式 return hello world 返回乙個字串 if name main 把程式儲存為hello.py 用python直譯器執行 python hello.py running on訪問 會看見 ...

Struts快速入門(二)

struts mvc語義 我們從關鍵的 struts 抽象概念開始,這是它 mvc架構的核心。struts 使用service to worker 模式實現了 mvc模式。core 控制器物件 控制器被 actionservlet 類所實現。它提供乙個中心位置來處理全部的終端請求。這就為處理檢視和 ...