Day: August 28, 2021
網頁設計工具
Chrome瀏覽器F12網頁開發工具教學
Chrome既是一個好用的瀏覽器，也是網頁開發員的好工具，能夠所見即所得修改網頁，又可以調試腳本，非常方便，能夠很好提升網頁設計效率。下面介紹如何使用這個工具。 1.如何調出開發者工具 調出Chrome網頁開發工具有2個方法： 1.在網頁按鍵盤上的F12（Windows與Mac也是這個鍵）調出2.在網頁右鍵菜單，選擇Inspect 例如，直接修改網頁上的任何內容，這裏演示修改“Google 搜尋”按鈕為“Web4Theme 搜尋” 2.網頁開發工具各部分介紹 chrome開發者工具最常用的四個功能模塊：元素（ELements）、控制台（Console）、源代碼（Sources），網絡（Network）。 元素（Elements）：用於查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點等。css可以即時修改，即時顯示。大大方便了開發者調試頁面 控制台（Console）：控制台一般用於執行一次性代碼，查看JavaScript對象，查看調試日誌信息或異常信息。還可以當作Javascript API查看用。例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入”console”並執行~ 源代碼（Sources）：該頁面用於查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調試JavaScript源代碼，可以給JS代碼添加斷點等。 網絡（Network）：網絡頁面主要用於查看header等與網絡連接相關的信息。 2.1 元素（Elements） 查看元素的代碼：點擊左上角的箭頭圖標進入選擇元素模式，然後從頁面中選擇需要查看的元素，然後可以在開發者工具元素（Elements）一欄中定位到該元素源代碼的具體位置 查看元素的CSS屬性：在元素的右邊欄中的styles頁面可以查看該元素的CSS屬性，這個頁面展示該元素原始定義的CSS屬性以及從父級元素繼承的CSS屬性。從這個頁面還可以查到該元素的某個CSS特性來自於那個CSS文件，使編碼調試時修改代碼變得非常方便。 如下圖中的class、src、width等屬性的值。 當然從源代碼中讀到的只是一部分顯式聲明的屬性在Styles頁旁邊，有一個Computed頁面，這個頁面展示該元素經過計算之後的所有CSS屬性，即最後瀏覽器渲染頁面時使用的屬性。屬性的計算由瀏覽器自動進行，是瀏覽器渲染頁面的一個必不可少的過程。 修改元素的代碼與屬性：點擊元素，然查看右鍵菜單，可以看到chrome提供的可對元素進行的操作：包括編輯元素代碼（Edit as HTML）、修改屬性（Add attribute、Edit attribute）等。選擇Edit as HTML選項時，元素進入編輯模式，可以對元素的代碼進行任意的修改。當然，這個修改也僅對當前的頁面渲染生效，不會修改服務器的源代碼，故而這個功能也是作為調試頁面效果而使用。 修改元素的CSS屬性：在元素的Styles頁面，可以對元素的CSS屬性進行修改，甚至刪除原有、添加新屬性。不過，這些修改，僅對當前瀏覽器的頁面展示生效，不會修改CSS源代碼。所以在這裡進行CSS屬性的修改一般用來調整和完善元素的渲染效果。 給元素添加斷點：在元素的右鍵菜單中選擇斷點選項（Break on…），選中之後，當元素被修改（通常是被JS代碼修改）時，頁面加載會暫停，然後可以查看該元素的屬性。 元素斷點添加之後，可以在右側欄的DOM Breakpoints頁面中看到，這個頁面可以看到當前網頁的所有元素斷點。 查看元素的監聽事件：元素的右邊欄的Event Listener頁面，可以查看到該元素的所有監聽事件。在開發中，尤其是維護其他人的代碼時，會出現不瞭解元素對應的監聽事件，這個時候，可以在這個頁面中找到。這個頁面不僅能看到對應的事件函數，還可以定位該函數所在的JS文件以及在該文件中的具體位置（行數），大大提高開發維護的效率。 2.2 控制台（Console） Console可以查看JS對象的及其屬性，通過js訪問當前頁面的所有元素及進行js的任何操作，並且能夠立即執行JS語句： 查看控制台日誌：當網頁的JS代碼中使用了console.log()函數時，該函數輸出的日誌信息會在控制台中顯示。日誌信息一般在開發調試時啓用，而當正式上線後，一般會將該函數去掉 2.3 源代碼（Source） 查看文件：在源代碼（Source）頁面可以查看到當前網頁的所有源文件。在左側欄中可以看到源文件以樹結構進行展示。添加斷點：在源代碼左邊有行號，點擊對應行的行號，就好給改行添加上一個斷點（再次點擊可刪除斷點）。右鍵點擊斷點，在彈出的菜單中選擇Edit breakpoint可以給該斷的添加中斷條件。 中斷調試：添加斷點後，當JS代碼運行到斷點時會中斷（對於添加了中斷條件的斷點在符合條件時中斷），此時可以將光標放在變量上查看變量的 也可以在右邊的側欄上查看： 在右側變量上方，有繼續運行、單步跳過等按鈕，可以在當前斷點後，逐行運行代碼，或者直接讓其繼續運行。 2.4 網絡（Network） 網絡能夠記錄所有請求，並且進行回放，另存為文件進行分析。 紅色圓型：記錄按鈕 處於打開狀態時會在此面板進行網絡連接的信息記錄，關閉後則不會記錄。 圓裏面有斜線：清除按鈕 清除當前的網絡連接記錄信息。（點擊一下就能清空） 下面的過濾器（Filter） 能夠自定義篩選條件，找到自己想要資源信息，如下圖所示。 也可以是一些指定條件指定條件有哪些？ […]
Read More