者:极客小俊
一个把逻辑思维转变为代码的技术博主

引言

我们平常在项目开发当中, 利用调试工具来调试CSS相关的代码, 它可以帮助我们了解哪些CSS 功能被使用，CSS代码效率，以及CSS代码的执行情况，而这些都是 CSS 代码检查与调试的核心, 它在某种情况下，会影响我们整个网站应用程序的整体性能, 所以掌握必要的调试技巧是很有必要的!

使用Chrome DevTools 调试CSS代码

我们平常可以使用chrome浏览器自带的Chrome DevTools调试工具 来检查与调试CSS代码!

基础手工调试 CSS 代码

快速手动查看元素的CSS样式

可以在chrome浏览器打开页面中按下快捷键F12 打开chrome开发调试工具,然后使用箭头工具 在Element选项中直接选择html代码 , 最后在右侧的Style中就可以看到当前这个元素的颜色、字体、大小等CSS相关信息

如图:

快速查看css link外部样式表

概念

在我们选择好元素节点之后, 右侧的 Styles 选项卡中，出现的当前元素的 CSS属性, 旁边的链接文件可以直接点击打开定义CSS规则外部样式表 可以查看样式的源文件

快速给选择的元素添加 行间样式

概念

这种方法相当于向html标签的 style 属性一样的原理!

当我们在Element选项中直接选择html代码中的一个元素之后 , 在右侧的Style中, 点击 element.style 就可以给当前选择的这个元素增加行间CSS样式了!

这个方法在实际应用开发当中很实用， 根据添加的行间css属性我们就很容易快速判断并且检测出元素的CSS属性的问题出在什么地方!

如图

快速向元素已有样式规则中添加、修改CSS属性

概念

平常在开发当中 也会用到这个小技巧, 来快速检测自己写的CSS是否有误!

添加CSS声明

当我们在Element选项中直接选择html代码中的一个元素之后 , 在右侧的Style中单击要添加声明的样式规则的{}大括号中间部分, 就可以出现光标，输入CSS属性名，最后输出完成后 按 enter 键即可!

修改CSS声明

我们只需要在原有样式上双击鼠标，修改样式规则，并按 Enter 键就可以了!

如图

快速给元素添加class类

概念

当我们在Element选项中直接选择html代码中的一个元素之后 , 在右侧的Style选项卡中有一个 .cls 的按钮,点击这个按钮会显示一个 Add new class 的输入框，输入想要添加的class类名之后按 enter 键就可以了

这样就可以直接点击 添加好的class类 复选框可以来回切换样式 进行CSS属性的测试

小提示: 前提是你最好是把要添加的class 先写好!

快速更改元素的CSS属性值快捷键

我们在Element选项右侧的Style选项卡中编辑CSS属性值的时候，可以使用键盘上的快捷键将值递增/递减的操作

• 方向键Up 则是每点击一次给CSS属性值增加1
• 方向键Down 则是每点击一次给CSS属性值减少1
• Alt+ 方向键Up 支持（windows，Linux）则是每点击一次给CSS属性值增加0.1
• Alt+ 方向键Down 支持（windows，Linux）则是每点击一次给CSS属性值减少0.1
• Shift + 方向键Up 则是每点击一次给CSS属性值增加10
• Shift + 方向键Down 则是每点击一次给CSS属性值减少10
• ctrl + Shift + Page Up 支持(windows，Linux）则是每点击一次给CSS属性值增加100
• ctrl + Shift + Page Down支持(windows，Linux）则是每点击一次给CSS属性值减少100

拾色器的使用

概念

一般可以使用拾色器来快速修改元素的颜色

在Style选项卡中,选中目标html元素后 将鼠标悬停在目标元素的颜色属性小图标上点击一下，就可以出现拾色器了 , 如果你很会搭配颜色这个小工具还是挺有用的!

如图

CSS Overview (当前页面CSS信息提取)

这个功能还是非常强大的! 但是chrome开发调试工具 默认是没有开启的, 所以需要我们手动去开启

如何在chrome开发调试工具中开启CSS Overview功能

步骤

打开chrome浏览器---->F12进入调试工具----->点击调试工具右上方的小齿轮setting图标进入设置---

---->选择Experiments----->勾选CSS Overview 选项即可!

如图

注意: 开启之后要重新开启一下调试工具!

CSS Overview的作用

这个功能可以给开发者展示出当前页面 CSS 属性的所有信息，比如颜色、字体、对比度问题、未使用的声明和media查询, 通常用这个工具来判断当前CSS 代码的质量。

CSS Overview功能包含五个信息板块

1.Overview summary

重点可以显示出一些当前页面中的CSS的使用情况!

2.Colors

可以显示出当前页面中使用到的所有颜色信息 包括 背景、 字体、 等等...

3.Font info

在这里可以显示出当前页面中 所使用到的字体以及字体css属性相关的所有信息!

也就是可以在这里看到每一种使用到的字体所设置的css字体相关属性

4.Media queries

在这里可以查看到当前页面中使用到的媒体查询相关信息

Coverage panel (检测信息覆盖度)

这个功能主要是可以用来检测CSS或JS 文件的代码数量以及使用评率, 也就是说它可以提示项目应用中加载的每个文件使用多少CSS

打开步骤

打开chrome浏览器---->F12进入调试工具----> Ctrl + shift + P 快捷键，输入Coverage，然后再选择: Show Coverage，最后点击刷新的小图标 就可以了!

小提示 可以在 URL Filter输入框中过滤出 .css文件, 只要输入.css 就可以专门显示 CSS文件了

如图

这些数据看似不重要，但可能有些时候可以帮助你 建立优化思维以及策略!

Rendering Panel (渲染面板)

听名字就知道它的作用是跟CSS效果渲染有关系的, 平常使用它 来检测代码的渲染时间以及渲染过载的区域!

关于css渲染涉及到浏览器构成,这里就不过多提及，以后我会出一篇详细做讲解!

Rendering Panel (渲染面板) 打开步骤

打开chrome浏览器---->F12进入调试工具----> Ctrl + shift + P 快捷键----->输入Rendering---->然后选择 Show Rendering项, 然后回出现很多复选框功能

平常我会用到的选项如下表:

如图

渲染面板中我们可以获取到 一些常规检查中没有的数据信息, 这些信息对于了解 CSS 代码 或者是 JS代码的性能以及消耗设备的资源等 都提供了很多依据和参照, 在深度优化的时候或许能给你带来一丝启发!

Performance Monitor (性能监视器)

故名意思就是用来查看代码运行的性能监视界面,

打开步骤

打开chrome浏览器---->F12进入调试工具----> Ctrl + shift + P 快捷键----->输入Performance Monitor---->最后选择 Show Performance Monitor 项 即可打开,

在这个面板当中可以勾选一些选项如下

CPU usage

当前CPU的使用率,也就是CPU占用率

JS heap size

指的是JS对象堆的占用的内存大小

DOM nodes

内存中DOM节点个数，这个会随着页面的效果变化而增加或减少

JS event listeners

JS事件侦听器个数

如图

Layouts/sec

在用户查看页面的过程当中，页面中的布局元素重排

Style recalcs / sec

页面中的样式重绘

以上两个选项通常也是用于检测与分析我们的CSS代码性能, 例如我们在CSS中使用了left或top属性那么就会产生一些布局上的重绘, 那么如果将这些属性加载到JS动画中，则可能每秒都触发几十甚至是上百次重绘操作

处于性能优化考虑 , 我们如果使用了CSS3中的transform属性中的translateX/Y来做动画效果 ,那么会发现它并不会触发重绘的流程,而只是组合画面 而这些都是基于显卡GPU, 而CPU 的使用率会大大降低!

所以我们平常在开发JS效果的过程当中使用 translate()来移动元素，而不用 top或left来移动元素的根本原因!

我们可以来看一下对比图:

小结: 所以通过 Layouts/sec与Style recalcs/sec 两个选项展示了在页面中触发重绘和布局的CSS相关信息

以上这些在平常前端开发当中可以帮助你获取一些实时应用程序的性能数据,在判断性能优劣的时候也是非常有帮助的!

Performance Panel (性能面板)

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节点、事件监听等所需要的渲染总体时间!

国外在线CSS调试检测代码工具

1.CSS Specificity Visualizer

概述

Specificity Visualizer个人觉得是一款国外非常不错的在线css检测工具

在线地址: https://isellsoap.github.io/specificity-visualizer/

如图

我们只需要打开访问地址后 粘贴你想要检测的CSS代码, 然后点击Visualize it按钮进行检测, 然后回在下面显示出特殊样式选择器 以及选择器的权重等相关信息

操作图

标记为红色的地方说明这些选择器还可以优化得更好!

2.CSS Specificity Graph Generator

概述

这款国外在线的CSS检测工具 可以帮助你检测 CSS代码中的 选择器是如何按特定样式组织

在线地址: https://jonassebastianohlsson.com/specificity-graph/

如图

它会提示波峰值高那么是不好的, 总的趋势应该是在样式表的后面有更高的特异性

如下图

END

以上就是平常我在工作与学习当中会使用到的一些CSS代码检测调试工具, 希望能给你带来一点帮助!

感谢你的阅读!

"点赞" "评论" "收藏"

大家的支持就是我坚持创作下去的动力!?

?如果以上内容有任何错误或者不准确的地方，欢迎在下面 留个言指出、或者你有更好的想法，欢迎一起交流学习?

者 | 陈峻

审校 | 孙淑娟

通常，测试JavaScript的过程对于新手测试人员来说，可能会比较痛苦。对此，业界已经开发出了许多现成的工具、技术和框架，尽量让该过程变得轻松一些。其中，诸如：Mocha、Jasmine和Jest之类的工具，提供了测试结构，而Istanbul和Blanket之类的工具则能够生成代码覆盖率的相关报告。可以说，在浏览器中，使用不同的方法去测试JavaScript代码，往往会产生满足不同需求目标的结果。我们很难仅靠一种工具、技术或解决方案，达到放之四海皆准的效果。本文将向您介绍如何在浏览器中测试JavaScript代码的6种流行测试方法，它们分别是：

• JSFiddle
• JSBin
• CodePen
• 跨浏览器测试工具
• Karam + Jasmine + Google Chrome
• Liveweave

下面，让我们逐渐进行讨论：

1.JSFiddle

无论您是使用JavaScript，还是使用React或Vue等框架，JSFiddle都是一款可以在浏览器中编写和测试JavaScript代码的在线工具。2009年，它是以“Mooshell”的形式被推出的。如果您正在开发Web应用程序，并用到了某种类型的JavaScript库，那么JSFiddle便是一款比较合适的测试工具。它的界面非常简单，您只需要输入一些JavaScript脚本，甚至添加一些HTML和CSS，即可立即查看到结果。因此，您可以在将JavaScript代码片段添加到自己的项目之前，使用JSFiddle进行全面测试。

2.JSBin

JSBin是JSFiddle的简洁纯净版的替代产品。如果您想使用一个更易于理解、且界面更加简洁的工具，那么JSBin会比JSFiddle更适合您。由于该平台提供免费和专业访问权限，因此只要您成为专业（pro）用户，就能够享受其针对私人垃圾箱、以及无限制的dropbox同步等高级功能。当然，您也可以使用JSBin的通用访问权限，去轻松地测试HTML、CSS和JavaScript的任何组合。

3.CodePen

CodePen是一种能够测试HTML、CSS和JavaScript代码的最佳在线工具。其开发者社区拥有丰富的资源。目前，它作为一个开源学习环境，不但拥有高达330000名已注册的开发者用户，而且正致力于开发满足各类应用需求的前端应用程序。可以说，它是构建和部署网站，并向全网推广您的产品，以及构建测试用例的最佳平台之一。

4.跨浏览器测试工具

虽然您可以轻松地使用JSFiddle和CodePen等工具，来测试您的JavaScript代码，但这些工具不会向您展示目标代码在不同浏览器或移动浏览器中的不同输出方式。如果您想测试代码的跨浏览器兼容性，那么您需要使用诸如LambdaTest之类，能够横跨多种浏览器的在线测试工具。目前，跨浏览器测试工具支持实时的交互式浏览器测试、自动屏幕截图测试、响应式布局测试、以及智能可视化UI测试等。该工具能够大幅加快您的测试周期，并协助您解决代码中的特定浏览器问题。

5.Karam + Jasmine + Google Chrome

Karma是一种能够让您根据多种实现意图，在浏览器中测试JavaScript代码的工具。不过，它无法单独测试代码的本身，而需要依赖诸如Jasmine和Mocha等第三方库，去执行代码，以开展测试。此外，它在交付形式上还需要一个真正的浏览器。也就是说，您必须在本地计算机上安装Google Chrome，才能使用这种JavaScript测试方法。当然，它是以无头模式(headless mode)，来启动Google Chrome，以执行各项操作。

6.Liveweave

作为另一种可用于测试JavaScript代码的在线工具，Liveweave具有实时的预览功能，并配备了参考标准来帮助您进行响应式设计。它的HTML、CSS和JavaScript代码提示功能，会使得初学者可以轻松地输入基本代码。此外，您也可以使用Liveweave将被测项目下载成为一个.zip文件，以便在代码中轻松地添加和使用包括jQuery、AngularJS、以及Bootstrap在内的外部库。

7.小结

除了上述介绍的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 源代码的方法。

谷歌浏览器 Google Chrome

仅查看源代码

方法一

要仅查看源代码，请按计算机键盘上的Ctrl+U。

方法二

右键单击网页的空白部分，然后从出现的弹出菜单中选择“查看网页源代码(V)”。

查看包含元素的页面源

1. 打开 Chrome 浏览器，然后浏览要查看其源代码的网页。
2. 点击浏览器窗口右上角的“自定义及控制Google Chrome” 图标。
3. 在出现的下拉菜单中，选择更多工具(L)，然后选择开发者工具(D)（快捷键：Ctrl+Shift+I）。
4. 单击屏幕底部出现的新部分左上角的“元素(Elements)”选项卡。

提示：

在 Chrome 中，按 F12 或 Ctrl+ Shift+I 也会调出交互式开发人员工具。此工具提供了与源代码和 CSS 设置的更多交互，使用户可以查看代码中的更改如何立即影响网页。

火狐浏览器 Mozilla Firefox

仅查看源代码

方法一

要仅查看源代码，请按计算机键盘上的 Ctrl+U。

方法二

右键单击网页的空白部分，然后从出现的弹出菜单中选择“查看页面源代码(V)”。

查看包含元素的页面源

1. 打开 Firefox 并浏览您要查看其源代码的网页。
2. 单击屏幕右上角的菜单 图标。
3. 在下拉菜单中选择Web开发者，然后从展开的菜单中选择切换工具箱（快捷键：Ctrl+ Shift+I）。
4. 单击显示在屏幕底部的部分左上角的“查看器”选项卡。

提示：

在 Firefox 中，按 F12 或 Ctrl+ Shift+I也会调出交互式开发人员工具。该工具提供了与源代码和 CSS 设置的交互，使用户可以实时查看代码中的更改如何影响网页。

查看页面的部分源代码

1. 突出显示网页中您要查看其源代码的部分。
2. 右键单击突出显示的部分，然后选择检查元素(Q)。

提示：

您可以使用 Firebug 附加组件查看和编辑页面的源代码，并通过浏览器实时查看更改。

微软 Edge

仅查看源代码

方法一

要仅查看源代码，请按计算机键盘上的Ctrl+U。

方法二

右键单击网页的空白部分，然后从出现的弹出菜单中选择“查看页面源代码(V)”。

查看包含元素的页面源

1. 打开 Microsoft Edge 并浏览您要查看其源代码的网页。
2. 点击屏幕右上角的设置和更多 图标。
3. 将鼠标移到更多工具(L)在下拉菜单中，在展开的菜单选择开发人员工具(D)。
4. 单击屏幕右侧出现的窗口顶部的“元素(Elements)”选项卡。

提示：

在Microsoft Edge中，按F12或 Ctrl+ Shift+I 也会调出交互式开发人员工具。该工具提供了与源代码和 CSS 设置的交互，使用户可以实时查看代码中的更改如何影响网页。

IE浏览器 Microsoft Internet Explorer

仅查看源代码

方法一

要仅查看源代码，请按计算机键盘上的Ctrl+U。

方法二

右键单击网页的空白部分，然后从出现的弹出菜单中选择查看源(V)。

查看包含元素的页面源

1. 打开 Internet Explorer 并浏览您要查看其源代码的网页。
2. 单击右上角的工具 。
3. 从下拉菜单中选择F12开发人员工具。
4. 单击开发人员工具菜单左上角的 DOM 资源管理器 选项卡。

提示：

在 Internet Explorer 中，按 F12 会弹出 DOM 工具。该工具提供了与源代码和 CSS 设置的交互，使用户可以查看代码中的更改如何立即影响网页。

360安全浏览器

仅查看源代码

方法一

要仅查看源代码，请按计算机键盘上的Ctrl+U。

方法二

右键单击网页的空白部分，然后从出现的弹出菜单中选择“查看网页源代码(V)”。

查看包含元素的页面源

1. 打开 360 安全浏览器，然后浏览要查看其源代码的网页。
2. 点击浏览器窗口右上角的打开菜单图标。
3. 在出现的下拉菜单中，选择更多工具(L)，然后选择开发者工具(D)（快捷键：Ctrl+Shift+I）。
4. 单击屏幕底部出现的新部分左上角的“元素(Elements)”选项卡。

提示：

在 360 安全浏览器中，按 F12 或 Ctrl+ Shift+I 也会调出交互式开发者工具。此工具提供了与源代码和 CSS 设置的更多交互，使用户可以查看代码中的更改如何立即影响网页。

如何关闭源代码页或工具

查看完网页上的源代码后，您可能想要退出或关闭它。关闭源代码取决于您用来打开源代码的方法。

• 如果您使用了Ctrl+U 方法（Edge 除外）或右键单击方法，请关闭在浏览器窗口顶部打开的新选项卡。
• 如果您使用过开发人员方法（使用 F12 或Ctrl+ Shift+I），请再次按相同的键，或单击工具窗口右上角的图标。

使用在线工具查看源代码

除了使用浏览器外，还有一些在线工具可让您查看任何网页的源代码。这些工具可能会有所帮助，因为大多数工具都可以格式化，样式化和突出显示代码，以使其易于阅读。

以上就是编程狮W3Cschool为你整理的关于《如何在浏览器账中查看网页的HTML源代码？》的全部内容，希望对你有所帮助~