火狐动态调试css_使用Firefox开发工具调试CSS网格

最新推荐文章于 2024-04-30 17:28:01 发布

culiu9261

最新推荐文章于 2024-04-30 17:28:01 发布

阅读量451

点赞数

文章标签：可视化 java python html 开发工具

原文链接：https://scotch.io/tutorials/debugging-css-grid-with-firefox-dev-tools

版权

火狐动态调试css

CSS Grid is mostly composed of rows, columns, cells, tracks, gaps etc. These things are not elements by themselves; hence, it can be really tasking to visualize and debug them. In this post, we’ll look at a few ways we can do it by using the inbuilt developer tools in the Firefox browser.

CSS Grid主要由行，列，单元格，轨道，间隙等组成。因此，可视化和调试它们确实是一项艰巨的任务。在本文中，我们将探讨通过使用Firefox浏览器中的内置开发人员工具来完成此操作的几种方法。

To do that, we will build a demo CSS Grid application and walk through the debug processes. For this article, we will be using the Firefox Developer Edition for debugging, feel free to download it if you care to follow along.

为此，我们将构建一个演示CSS Grid应用程序并逐步调试。对于本文，我们将使用Firefox开发人员版进行调试，如果您愿意遵循的话，请随时下载。

To get started, we’ll create a mini CSS project that displays a grid of cat images and then get into the debugging process with the installed Firefox developer tools.

首先，我们将创建一个迷你CSS项目，该项目显示猫眼图像的网格，然后使用已安装的Firefox开发人员工具进入调试过程。

演示版 ( Demo )

Here’s a simple demo to serve the purpose, open your favourite code editor and paste in these HTML and CSS snippets:

这是一个用于实现此目的的简单演示，打开您喜欢的代码编辑器并粘贴以下HTML和CSS代码段：

//HTML file for debug demo<body>
  <div class="wrapper">
    <div class="cat"><img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"> </div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"><img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"> </div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"><img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"> </div>
  </div>
</body>

Also, for the CSS, update your file with this snippet:

另外，对于CSS，请使用以下代码段更新文件：

//CSS file for debug demo
body {
  margin: 40px;
  background-color: #fff
}
.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}
.cat {
  background-color: black;
  border-radius: 5px;
  padding: 5px;
  border-color: black;
}
.cat-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

The visual output is a grid layout of cat images with 3 rows and columns, as shown below:

可视输出是具有3行和3列的猫图像的网格布局，如下所示：

安装Firefox开发人员版 ( Install Firefox Developer Edition )

Like I mentioned earlier, we will be using the Firefox Developer Edition for our debugging processes. If you don’t have it installed yet, feel free to follow the installation process I’ll demonstrate here:

如前所述，我们将在调试过程中使用Firefox开发人员版。如果尚未安装，请按照我将在此处演示的安装过程进行操作：

Visit the official download page

访问官方下载页面
Download the Firefox Developer Edition for your OS and install it on your machine. Next, go ahead and open the HTML project we created at the beginning of the post on a new tab.

下载适用于您的OS的Firefox Developer Edition，并将其安装在您的计算机上。接下来，继续并在新选项卡上打开我们在文章开头创建HTML项目。

打开开发工具 ( Open DevTools )

To inspect our project, open it up in your Firefox browser and control-click anywhere on the screen, then select Inspect Element to open up the developer tools terminal.

要检查我们的项目，请在Firefox浏览器中将其打开，然后在屏幕上的任意位置单击Control键并单击，然后选择“ 检查元素”以打开开发人员工具终端。

使用Firefox Devtools进行调试 ( Debugging with Firefox Devtools )

Visualize Grid Containers On a Page With the new features available in Firefox Developer Edition, you can visualize all the grid containers you have on a page. It also gives you a skeletal overlay of the grid itself to better see how elements are positioned in it.

在页面上可视化网格容器借助Firefox Developer Edition中可用的新功能，您可以在页面上可视化所有网格容器。它还为您提供了网格本身的骨架叠加，可以更好地了解元素在其中的位置。

在叠加层上自定义网格信息 (Customize Grid Information on The Overlay)

Oh did I mention that you can customize the grid overlay? Well, you can. You can choose to display different properties on the overlay to help you better visualize and debug your grid. Grid line numbers, area names, dimensions and indefinite grid lines are a few things you can toggle their display.

哦，我提到您可以自定义网格叠加了吗？好吧，可以。您可以选择在叠加层上显示不同的属性，以帮助您更好地可视化和调试网格。网格线号，区域名称，尺寸和不确定的网格线是您可以切换其显示的几件事。

The grid visible grid lines will help us understand where the tracks are, the columns, rows etc are all visible.

网格可见的网格线将帮助我们了解轨道的位置，列，行等都是可见的。

交互式网格概述 (Interactive Grid Outlining)

Mousing over the grid overlay in dev tools will outline the matching cells on the page to give you an appealing visual representation of your columns and rows while you debug. It also displays the sizes, and positions of different parts of your grid on mouse hover.

将鼠标悬停在开发工具中的网格覆盖上将在页面上勾勒出匹配的单元格，从而在调试时为您的列和行提供有吸引力的视觉表示。它还在鼠标悬停时显示网格的不同部分的大小和位置。

可视化应用于网格容器的转换 (Visualize Transformations Applied to Grid Containers)

The grid Inspector is capable of visualizing transformations applied on grid containers. If for instance, we decide to transform our grid container by 15 degrees, we get this output:

网格检查器能够可视化应用于网格容器的转换。例如，如果我们决定将网格容器转换15度，则会得到以下输出：

This is a very handy debugging tool given that sometimes, you have grids that are not just transformed but translated, rotated, skewed etc. In such cases, it will tell you exactly where errors are emerging from if you have any.

这是一个非常方便的调试工具，因为有时您不仅具有转换后的网格，还可以转换，旋转，倾斜等。在这种情况下，它可以准确告诉您出现错误的位置。

网格轨迹 (Grid Tracks)

The columns and rows in a grid are collectively referred to as tracks. Tracks are numbered by the lines that start and stop them as we’ve seen in the previous illustrations. As a result, a grid with 3 columns will have 4 tracks horizontally and vertically.

网格中的列和行统称为轨道。轨道由开始和停止它们的行编号，如上图所示。结果，具有3列的网格将在水平和垂直方向上具有4条轨道。

隐式和显式跟踪 (Implicit and Explicit Tracks)

Tacks that are created by the rows and columns defined in the grid are called explicit tracks and are represented in the grid by the thick dashed lines in the grid gap to differentiate them from implicit tracks. It will be hard to visualize, but if we lighten up the background-color of the cat images and zoom in a bit on the grid, we should see the explicit tracks surrounding the cat images:

由网格中定义的行和列创建的大头钉称为显式轨道，并在网格中由网格间隙中的粗虚线表示，以将它们与隐式轨道区分开。很难想象，但是如果我们照亮猫图像的background-color并在网格上放大一点，我们应该看到猫图像周围的显式轨迹：

At this point, our grid container looks like this:

至此，我们的网格容器如下所示：

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}

What this means is that we explicitly created rows and columns for the grid. So at the moment, we have all explicit tracks in our grid (a good way to know this is to look at the vertical and horizontal track lines in the grid, you’ll notice that they all look the same). Now if we turn off the rows in dev tools, we’ll almost notice no difference in grid display because of what we call implicit tracks.

这意味着我们为网格显式创建了行和列。因此，目前，我们在网格中拥有所有显式轨迹（了解这一点的一种好方法是查看网格中的垂直和水平轨迹线，您会注意到它们看起来都一样）。现在，如果我们关闭开发工具中的行，由于我们称为隐式轨道 ，我们几乎将注意到网格显示没有任何区别。

Implicit tracks are created by default when you define rows for your grid without explicitly defining the associating columns or vice versa. To visualize this, let’s turn off grid-template-rows: 100px 100px 100px; in dev tools and check the tracks again:

当您为网格定义行而不显式定义关联列时，默认情况下会创建隐式轨道。为了可视化，让我们关闭grid-template-rows: 100px 100px 100px; 在开发工具中，然后再次检查轨道：

Now if you look closely, you will notice that the horizontal tracks are no longer as tick and visible as the vertical tracks, they are rather faint and dotted. Why? Because now they are just implicit tracks (undefined) in the grid.

现在，如果您仔细观察，您会发现水平轨道不再像垂直轨道那样滴答且可见，它们变得更加模糊和点缀。为什么？因为现在它们只是网格中的隐式轨道（未定义）。

追踪变更 (Tracking changes)

The Firefox dev tools also have a Changes tab where you can track all the changes you’ve made to your project from inception to completion. So far in this post, we’ve mad just about two changes, we changed the background-color and unchecked the box for grid-template-rows. If we switch over to the Changes tab in dev tools, we should see all our changes.

Firefox开发人员工具还具有“ Changes选项卡，您可以在其中跟踪从开始到完成对项目所做的所有更改。到目前为止，在本文中，我们只做了两个更改，我们更改了background-color并且未选中grid-template-rows的框。如果切换到开发工具中的“ Changes选项卡，则应该看到所有更改。

The Firefox dev tools inspector makes it really straightforward to work with CSS grid. You can visualize all your grid data, debug any arising issues, track all your project changes and inspect animations. It is worthy to note once more that these features are not available in all Firefox browser versions, to get these features, you need either the Firefox Nightly version or the Developer Edition.

Firefox开发人员工具检查器使使用CSS网格的工作变得非常简单。您可以可视化所有网格数据，调试任何出现的问题，跟踪所有项目更改并检查动画。再次值得注意的是，这些功能并非在所有Firefox浏览器版本中都可用，要获得这些功能，您需要Firefox Nightly版本或Developer Edition。

翻译自: https://scotch.io/tutorials/debugging-css-grid-with-firefox-dev-tools

火狐动态调试css

culiu9261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
火狐动态调试css_使用Firefox开发工具调试CSS网格

火狐动态调试cssCSS Grid is mostly composed of rows, columns, cells, tracks, gaps etc. These things are not elements by themselves; hence, it can be really tasking to visualize and debug them. In this post, ...
复制链接

扫一扫