草庐IT

关于 css：如何在浏览器中勾勒 HTML 页面的元素以查看框的布局？修改用户代理样式表？

codeneng 2023-03-28 原文

How can I outline the elements of an HTML page in the browser to see the layout of the boxes? Modify the user agent style sheet?

在 Chrome devtools、Firefox devtools、Safari、Opera 等中，如果我检查一个元素，当我将鼠标悬停在源面板中该元素的代码上时，我可以看到它的边界框轮廓清晰。那太棒了。但是，如果我想查看页面上所有(或大部分)元素的布局怎么办？例如，也许我希望看到这样的内容：

在 Firefox 的"样式编辑器"中，我添加了以下样式：

1
2
3
4
5
div { border: 1px dotted pink }
p   { border: 1px solid green }
a   { border: 2px solid yellow }
li  { border: 1px dashed cyan }
img { border: 1px solid purple}

(Chrome 不能这样做，因为它不支持 UAAG 2.0 网络无障碍标准)。由于用户代理样式表覆盖了页面中的样式，我看到了我正在寻找的那种轮廓。

现在这只是一个 hack，也许就足够了，但是是否有其他工具可以做到这一点，或者我没有找到的 devtools 中的某些东西？

注意：我确实在 Chrome 的"渲染"菜单选项下找到了有关"显示复合图层边框"的答案，但这并不是我真正想要的：

https://superuser.com/questions/774424/grid-overlay-showing-up-as-soon-a-i-launch-chrome-developer-tools

我就是这样用的

1
2
3
*:hover {
   outline:1px blue solid;
 }

  • 哇！这很酷而且超级简单！例如，在 chrome 中，我只需单击此页面上样式面板右上角的加号图标，添加该样式规则，然后我可以移动鼠标以查看每个小元素的轮廓。高超！
  • 在 Firefox 中添加样式规则几乎相同，在"规则视图"中按加号 -- developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to??/...

您不必像使用开发人员工具 [F12] 那样编辑用户代理样式表。

您需要添加此代码

1
*{border: 1px solid #fff}

  • 这看起来就像我所做的，除了一个样式规则而不是我的五个。您在开发人员工具中的哪个位置添加了这个？在"样式编辑器"下，就像我为 Firefox 所做的那样？这也可以在 Chrome 中完成吗？
  • 工作正常，谢谢！附言但不幸的是，不暴露/显示背景图像/元素边界，这可能吗？火狐 52.5.3

原来我一直在寻找一个朋友很久以前提到的浏览器扩展："Web Developer"扩展。

http://chrispederick.com/work/web-developer/

下面是块级元素的概述：

它适用于 Chrome、Firefox 和 Opera。显然不适用于 Safari。

  • 还有一种更轻巧的方法：Chrome 农药
  • 还有一个适用于 Firefox 的 Pesticide CSS：github.com/mrmrs/pesticide
  • 啊，有一个 Firefox Pesticide 插件(尽管在撰写本文时与 Firefox Quantum 不兼容)。 addons.mozilla.org/en-US/firefox/addon/pesticide
  • 我刚刚了解到的另一个：tachyons-x-ray chrome.google.com/webstore/detail/tachyons-x-ray/...

如果您使用的是 Firefox Quantum：

https://addons.mozilla.org/en-US/firefox/addon/open-pesticide/?src=search

Open Pesticide by MatthewBaa

Outlines each element on the page to help you visualize their
dimensions and overcome those annoying CSS layout issues. Requires
zero permissions and completely open source.

素以勾勒spanclasssectionbrowsercsslayoutoutlineuser-agent

有关关于 css：如何在浏览器中勾勒 HTML 页面的元素以查看框的布局？修改用户代理样式表？的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  5. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  6. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  7. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  8. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  9. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  10. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

随机推荐