在我们
开发网站的时候，每个工程师都有自己的小技巧，方便实用还能提高工作效率。今天深圳尼高网站设计公司小编就和大家分享一些网站开发工具的使用技巧。
当谈到网站开发工具使用技巧时，我们都有自己的偏好和个人独家秘方，并且我们为知道使我们的网站开发更容易的“一个小技巧”而自豪。
第一缩放开发工具，如果你像我一样，你可能会发现DevTools中的文本和按钮太小，使用起来不舒服。事实上，你可以放大DevTools的用户界面。DevTools的用户界面是用HTML、CSS和JavaScript构建的，这意味着它由浏览器呈现为web内容。就像浏览器中的任何其他web内容一样，可以通过使用Ctrl+和Ctrl-键盘快捷键(或Cmd+和Cmd-在macOS上)。因此如果您发现DevTools中的文本太小而无法阅读，请单击DevTools中的任意位置以确保焦点在那里，然后按Ctrl+(或者Cmd+在macOS上)。
第二删除烦人的覆盖图。不幸的是今天网络的很大一部分患有疾病，内容被无数的横幅、广告和弹出窗口覆盖，使得我们很难真正查看或做我们最初想要做的事情。虽然有其他解决方案可以做到这一点(比如在一些浏览器中使用阅读器模式)，但我们这些一辈子都在使用DevTools的人可能更喜欢这个技巧:单击DevTools中的按钮选择一个元素。这是左上角的指针图标。你也可以使用计算机的ctrl按键+变化+C相反(或者煤矿管理局+变化+C在macOS上)；现在将鼠标悬停在页面上，通过单击选择您想要移除的讨厌的弹出窗口或覆盖窗口；压删除在你的键盘上！
第三列出页面上使用的字体。我通常可以看到这方面的两个用例:一是你正在浏览一个设计精美的网站，并想知道该网站使用哪种字体。二是您正在自己的网站上调试一个问题，其中使用了不正确的字体，可能是因为字体回退问题或缺少字形。在这两种情况下，您都可以使用DevTools准确地找出哪种字体用于呈现一段内容。Firefox有一个非常好的字体面板的侧栏中检查员此工具列出了用于呈现文本内容的字体。此工具也与选定的元素一起使用，因此如果您选择<body>，那么所有的字体都会被列出，但是如果您选择一个像<p>标签，那么将只列出用于呈现该元素的字体。
第四测量页面上的任意距离。有时快速测量网页上某个区域的大小或两个物体之间的距离会很有用。当然，您可以使用DevTools来获取任何给定元素的大小。但是有时，您需要测量任意距离，该距离可能与页面上的任何元素都不匹配。当这种情况发生时，一个很好的方法是使用Firefox的测量工具:如果您尚未启用该工具，请启用它。这只需要做一次:打开DevTools，进入设置通过按压面板子一代并且，在可用的工具箱按钮，检查测量页面的一部分选项；现在在任何页面上，单击新的测量页面的一部分工具栏中的图标；用鼠标单击并拖动来测量距离和面积。
希望这些网站开发技巧能帮助到你们，当然如果你们有更多更好的技巧也可以一起分享，让我们的网站开发变得更容易。
