整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者:極客小俊
一個把邏輯思維轉變為代碼的技術博主
引言
我們平常在項目開發當中, 利用調試工具來調試CSS相關的代碼, 它可以幫助我們了解哪些CSS 功能被使用，CSS代碼效率，以及CSS代碼的執行情況，而這些都是 CSS 代碼檢查與調試的核心, 它在某種情況下，會影響我們整個網站應用程序的整體性能, 所以掌握必要的調試技巧是很有必要的!
我們平常可以使用chrome瀏覽器自帶的Chrome DevTools調試工具 來檢查與調試CSS代碼!
可以在chrome瀏覽器打開頁面中按下快捷鍵F12 打開chrome開發調試工具,然后使用箭頭工具 在Element選項中直接選擇html代碼 , 最后在右側的Style中就可以看到當前這個元素的顏色、字體、大小等CSS相關信息
如圖:
概念
在我們選擇好元素節點之后, 右側的 Styles 選項卡中，出現的當前元素的 CSS屬性, 旁邊的鏈接文件可以直接點擊打開定義CSS規則外部樣式表 可以查看樣式的源文件
概念
這種方法相當于向html標簽的 style 屬性一樣的原理!
當我們在Element選項中直接選擇html代碼中的一個元素之后 , 在右側的Style中, 點擊 element.style 就可以給當前選擇的這個元素增加行間CSS樣式了!
這個方法在實際應用開發當中很實用， 根據添加的行間css屬性我們就很容易快速判斷并且檢測出元素的CSS屬性的問題出在什么地方!
如圖
概念
平常在開發當中 也會用到這個小技巧, 來快速檢測自己寫的CSS是否有誤!
添加CSS聲明
當我們在Element選項中直接選擇html代碼中的一個元素之后 , 在右側的Style中單擊要添加聲明的樣式規則的{}大括號中間部分, 就可以出現光標，輸入CSS屬性名，最后輸出完成后 按 enter 鍵即可!
修改CSS聲明
我們只需要在原有樣式上雙擊鼠標，修改樣式規則，并按 Enter 鍵就可以了!
如圖
概念
當我們在Element選項中直接選擇html代碼中的一個元素之后 , 在右側的Style選項卡中有一個 .cls 的按鈕,點擊這個按鈕會顯示一個 Add new class 的輸入框，輸入想要添加的class類名之后按 enter 鍵就可以了
這樣就可以直接點擊 添加好的class類 復選框可以來回切換樣式 進行CSS屬性的測試
小提示: 前提是你最好是把要添加的class 先寫好!
我們在Element選項右側的Style選項卡中編輯CSS屬性值的時候，可以使用鍵盤上的快捷鍵將值遞增/遞減的操作
概念
一般可以使用拾色器來快速修改元素的顏色
在Style選項卡中,選中目標html元素后 將鼠標懸停在目標元素的顏色屬性小圖標上點擊一下，就可以出現拾色器了 , 如果你很會搭配顏色這個小工具還是挺有用的!
如圖
這個功能還是非常強大的! 但是chrome開發調試工具 默認是沒有開啟的, 所以需要我們手動去開啟
如何在chrome開發調試工具中開啟CSS Overview功能
步驟
打開chrome瀏覽器---->F12進入調試工具----->點擊調試工具右上方的小齒輪setting圖標進入設置---
---->選擇Experiments----->勾選CSS Overview 選項即可!
如圖
注意: 開啟之后要重新開啟一下調試工具!
CSS Overview的作用
這個功能可以給開發者展示出當前頁面 CSS 屬性的所有信息，比如顏色、字體、對比度問題、未使用的聲明和media查詢, 通常用這個工具來判斷當前CSS 代碼的質量。
CSS Overview功能包含五個信息板塊
重點可以顯示出一些當前頁面中的CSS的使用情況!
可以顯示出當前頁面中使用到的所有顏色信息 包括 背景、 字體、 等等...
在這里可以顯示出當前頁面中 所使用到的字體以及字體css屬性相關的所有信息!
也就是可以在這里看到每一種使用到的字體所設置的css字體相關屬性
在這里可以查看到當前頁面中使用到的媒體查詢相關信息
這個功能主要是可以用來檢測CSS或JS 文件的代碼數量以及使用評率, 也就是說它可以提示項目應用中加載的每個文件使用多少CSS
打開步驟
打開chrome瀏覽器---->F12進入調試工具----> Ctrl + shift + P 快捷鍵，輸入Coverage，然后再選擇: Show Coverage，最后點擊刷新的小圖標 就可以了!
小提示 可以在 URL Filter輸入框中過濾出 .css文件, 只要輸入.css 就可以專門顯示 CSS文件了
如圖
這些數據看似不重要，但可能有些時候可以幫助你 建立優化思維以及策略!
聽名字就知道它的作用是跟CSS效果渲染有關系的, 平常使用它 來檢測代碼的渲染時間以及渲染過載的區域!
關于css渲染涉及到瀏覽器構成,這里就不過多提及，以后我會出一篇詳細做講解!
Rendering Panel (渲染面板) 打開步驟
打開chrome瀏覽器---->F12進入調試工具----> Ctrl + shift + P 快捷鍵----->輸入Rendering---->然后選擇 Show Rendering項, 然后回出現很多復選框功能
平常我會用到的選項如下表:
復選項 | 描述 |
Paint flashing | 當頁面上有重繪效果的地方,會顯示綠色矩形的區域進行標注! 可以簡單理解為有動態效果的頁面區域, 這些效果區域 往往瀏覽器渲染的時間會長一些! |
Frame Rendering Stats | 這個選項勾選上之后可以顯示GPU 和幀的一些實時情況, 用來判定一些效果動畫是否卡頓還是比較有用的! |
如圖
渲染面板中我們可以獲取到 一些常規檢查中沒有的數據信息, 這些信息對于了解 CSS 代碼 或者是 JS代碼的性能以及消耗設備的資源等 都提供了很多依據和參照, 在深度優化的時候或許能給你帶來一絲啟發!
故名意思就是用來查看代碼運行的性能監視界面,
打開步驟
打開chrome瀏覽器---->F12進入調試工具----> Ctrl + shift + P 快捷鍵----->輸入Performance Monitor---->最后選擇 Show Performance Monitor 項 即可打開,
在這個面板當中可以勾選一些選項如下
當前CPU的使用率,也就是CPU占用率
指的是JS對象堆的占用的內存大小
內存中DOM節點個數，這個會隨著頁面的效果變化而增加或減少
JS事件偵聽器個數
如圖
在用戶查看頁面的過程當中，頁面中的布局元素重排
頁面中的樣式重繪
以上兩個選項通常也是用于檢測與分析我們的CSS代碼性能, 例如我們在CSS中使用了left或top屬性那么就會產生一些布局上的重繪, 那么如果將這些屬性加載到JS動畫中，則可能每秒都觸發幾十甚至是上百次重繪操作
處于性能優化考慮 , 我們如果使用了CSS3中的transform屬性中的translateX/Y來做動畫效果 ,那么會發現它并不會觸發重繪的流程,而只是組合畫面 而這些都是基于顯卡GPU, 而CPU 的使用率會大大降低!
所以我們平常在開發JS效果的過程當中使用 translate()來移動元素，而不用 top或left來移動元素的根本原因!
我們可以來看一下對比圖:
小結: 所以通過 Layouts/sec與Style recalcs/sec 兩個選項展示了在頁面中觸發重繪和布局的CSS相關信息
以上這些在平常前端開發當中可以幫助你獲取一些實時應用程序的性能數據,在判斷性能優劣的時候也是非常有幫助的!
Performance Panel跟之前的Performance Monitor的區別就是 我們先通過 Performance Monitor性能監視器來把控每一個環節的性能, 然后再使用Performance Panel進行整體的性能分析!
打開步驟
打開chrome瀏覽器---->F12進入調試工具----> Ctrl + shift + P 快捷鍵----->輸入Performance---->然后我們選擇 Show Performance項, 最后點擊重新加載的圖標,或者按下快捷鍵 ctrl + shift + e
并且我們也可以反復按下快捷鍵(ctrl + shift + e)重新加載繪制頁面性能信息, 在最下面的餅圖中顯示了繪制頁面和渲染頁面的總體時間!
如圖
從上圖中就可以看到 當我們打開性能面板加載之后就可以獲取到 加載頁面的時間/毫秒、 CSS、JS、DOM節點、事件監聽等所需要的渲染總體時間!
概述
Specificity Visualizer個人覺得是一款國外非常不錯的在線css檢測工具
在線地址: https://isellsoap.github.io/specificity-visualizer/
如圖
我們只需要打開訪問地址后 粘貼你想要檢測的CSS代碼, 然后點擊Visualize it按鈕進行檢測, 然后回在下面顯示出特殊樣式選擇器 以及選擇器的權重等相關信息
操作圖
標記為紅色的地方說明這些選擇器還可以優化得更好!
概述
這款國外在線的CSS檢測工具 可以幫助你檢測 CSS代碼中的 選擇器是如何按特定樣式組織
在線地址: https://jonassebastianohlsson.com/specificity-graph/
如圖
它會提示波峰值高那么是不好的, 總的趨勢應該是在樣式表的后面有更高的特異性
如下圖
以上就是平常我在工作與學習當中會使用到的一些CSS代碼檢測調試工具, 希望能給你帶來一點幫助!
感謝你的閱讀!
"點贊" "評論" "收藏"
大家的支持就是我堅持創作下去的動力!?
?如果以上內容有任何錯誤或者不準確的地方，歡迎在下面 留個言指出、或者你有更好的想法，歡迎一起交流學習?
者 | 陳峻
審校 | 孫淑娟
通常，測試JavaScript的過程對于新手測試人員來說，可能會比較痛苦。對此，業界已經開發出了許多現成的工具、技術和框架，盡量讓該過程變得輕松一些。其中，諸如：Mocha、Jasmine和Jest之類的工具，提供了測試結構，而Istanbul和Blanket之類的工具則能夠生成代碼覆蓋率的相關報告。可以說，在瀏覽器中，使用不同的方法去測試JavaScript代碼，往往會產生滿足不同需求目標的結果。我們很難僅靠一種工具、技術或解決方案，達到放之四海皆準的效果。本文將向您介紹如何在瀏覽器中測試JavaScript代碼的6種流行測試方法，它們分別是：
下面，讓我們逐漸進行討論：
無論您是使用JavaScript，還是使用React或Vue等框架，JSFiddle都是一款可以在瀏覽器中編寫和測試JavaScript代碼的在線工具。2009年，它是以“Mooshell”的形式被推出的。如果您正在開發Web應用程序，并用到了某種類型的JavaScript庫，那么JSFiddle便是一款比較合適的測試工具。它的界面非常簡單，您只需要輸入一些JavaScript腳本，甚至添加一些HTML和CSS，即可立即查看到結果。因此，您可以在將JavaScript代碼片段添加到自己的項目之前，使用JSFiddle進行全面測試。
JSBin是JSFiddle的簡潔純凈版的替代產品。如果您想使用一個更易于理解、且界面更加簡潔的工具，那么JSBin會比JSFiddle更適合您。由于該平臺提供免費和專業訪問權限，因此只要您成為專業（pro）用戶，就能夠享受其針對私人垃圾箱、以及無限制的dropbox同步等高級功能。當然，您也可以使用JSBin的通用訪問權限，去輕松地測試HTML、CSS和JavaScript的任何組合。
CodePen是一種能夠測試HTML、CSS和JavaScript代碼的最佳在線工具。其開發者社區擁有豐富的資源。目前，它作為一個開源學習環境，不但擁有高達330000名已注冊的開發者用戶，而且正致力于開發滿足各類應用需求的前端應用程序。可以說，它是構建和部署網站，并向全網推廣您的產品，以及構建測試用例的最佳平臺之一。
雖然您可以輕松地使用JSFiddle和CodePen等工具，來測試您的JavaScript代碼，但這些工具不會向您展示目標代碼在不同瀏覽器或移動瀏覽器中的不同輸出方式。如果您想測試代碼的跨瀏覽器兼容性，那么您需要使用諸如LambdaTest之類，能夠橫跨多種瀏覽器的在線測試工具。目前，跨瀏覽器測試工具支持實時的交互式瀏覽器測試、自動屏幕截圖測試、響應式布局測試、以及智能可視化UI測試等。該工具能夠大幅加快您的測試周期，并協助您解決代碼中的特定瀏覽器問題。
Karma是一種能夠讓您根據多種實現意圖，在瀏覽器中測試JavaScript代碼的工具。不過，它無法單獨測試代碼的本身，而需要依賴諸如Jasmine和Mocha等第三方庫，去執行代碼，以開展測試。此外，它在交付形式上還需要一個真正的瀏覽器。也就是說，您必須在本地計算機上安裝Google Chrome，才能使用這種JavaScript測試方法。當然，它是以無頭模式(headless mode)，來啟動Google Chrome，以執行各項操作。
作為另一種可用于測試JavaScript代碼的在線工具，Liveweave具有實時的預覽功能，并配備了參考標準來幫助您進行響應式設計。它的HTML、CSS和JavaScript代碼提示功能，會使得初學者可以輕松地輸入基本代碼。此外，您也可以使用Liveweave將被測項目下載成為一個.zip文件，以便在代碼中輕松地添加和使用包括jQuery、AngularJS、以及Bootstrap在內的外部庫。
除了上述介紹的6種可以在瀏覽器中測試JavaScript代碼的流行方式，您還可以使用CSSDeck和Dabblet等工具。它們同樣便捷且易用。當然，Firebug和Chrome等由大廠提供的開發者工具，通常還會提供Javascript控制臺，以方便您直接輸入JavaScript代碼，并執行之。它們不但可以適合原生的瀏覽器，還適用于Internet Explorer 8以上、Opera、Safari、以及各種新出現的瀏覽器。
原文鏈接：https://dzone.com/articles/how-to-test-javascript-code-in-a-browser
陳峻 （Julian Chen），51CTO社區編輯，具有十多年的IT項目實施經驗，善于對內外部資源與風險實施管控，專注傳播網絡與信息安全知識與經驗；持續以博文、專題和譯文等形式，分享前沿技術與新知；經常以線上、線下等方式，開展信息安全類培訓與授課。
來源： 51CTO技術棧
覽html網頁，查看其源代碼，可以幫助我們了解該版網頁的信息以及架構，每個瀏覽器都是允許用戶查看他們訪問的任何網頁的HTML源代碼的。以下編程獅小師妹就介紹幾個常見瀏覽器的查看網頁 HTML 源代碼的方法。
方法一
要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。
方法二
右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看網頁源代碼(V)”。
提示：
在 Chrome 中，按 F12 或 Ctrl+ Shift+I 也會調出交互式開發人員工具。此工具提供了與源代碼和 CSS 設置的更多交互，使用戶可以查看代碼中的更改如何立即影響網頁。
方法一
要僅查看源代碼，請按計算機鍵盤上的 Ctrl+U。
方法二
右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看頁面源代碼(V)”。
提示：
在 Firefox 中，按 F12 或 Ctrl+ Shift+I也會調出交互式開發人員工具。該工具提供了與源代碼和 CSS 設置的交互，使用戶可以實時查看代碼中的更改如何影響網頁。
提示：
您可以使用 Firebug 附加組件查看和編輯頁面的源代碼，并通過瀏覽器實時查看更改。
方法一
要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。
方法二
右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看頁面源代碼(V)”。
提示：
在Microsoft Edge中，按F12或 Ctrl+ Shift+I 也會調出交互式開發人員工具。該工具提供了與源代碼和 CSS 設置的交互，使用戶可以實時查看代碼中的更改如何影響網頁。
方法一
要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。
方法二
右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇查看源(V)。
提示：
在 Internet Explorer 中，按 F12 會彈出 DOM 工具。該工具提供了與源代碼和 CSS 設置的交互，使用戶可以查看代碼中的更改如何立即影響網頁。
方法一
要僅查看源代碼，請按計算機鍵盤上的Ctrl+U。
方法二
右鍵單擊網頁的空白部分，然后從出現的彈出菜單中選擇“查看網頁源代碼(V)”。
提示：
在 360 安全瀏覽器中，按 F12 或 Ctrl+ Shift+I 也會調出交互式開發者工具。此工具提供了與源代碼和 CSS 設置的更多交互，使用戶可以查看代碼中的更改如何立即影響網頁。
查看完網頁上的源代碼后，您可能想要退出或關閉它。關閉源代碼取決于您用來打開源代碼的方法。
除了使用瀏覽器外，還有一些在線工具可讓您查看任何網頁的源代碼。這些工具可能會有所幫助，因為大多數工具都可以格式化，樣式化和突出顯示代碼，以使其易于閱讀。
以上就是編程獅W3Cschool為你整理的關于《如何在瀏覽器賬中查看網頁的HTML源代碼？》的全部內容，希望對你有所幫助~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
