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