简体   繁体   English

有没有办法在Safari Web检查器中获取伪元素的计算量度?

[英]Is there way to get computed metrics of pseudo elements in Safari web inspector?

I am primarily using Chrome developer tools for debugging html/css/js, but now I needed to debug different rendering of pseudo element in Chrome vs Safari. 我主要是使用Chrome开发人员工具来调试html / css / js,但现在我需要在Chrome与Safari中调试伪元素的不同呈现方式。

I could not find a way to get computed metrics (or any computed css properties) of :before pseudo element in Safari. 我找不到一种方法来获取Safari中伪元素前的计算指标(或任何计算后的CSS属性)。

Pictures for better explanation: 图片更好的解释:

Chrome: 铬: :在伪元素在Chrome检查器中显示为元素之前 Safari: 苹果浏览器: 没有伪元素,我看不到显示它们的选项

Am I missing something? 我想念什么吗? Option, switch..? 选项,开关..?

You're not able to view the pseudo tag directly within the DOM inspection window but you can view the pseudo styles within the style inspector window in the right column. 您无法直接在DOM检查窗口中查看伪标记,但可以在右侧列的样式检查器窗口中查看伪样式。

Here is an example from one of my applications. 这是我的一个应用程序中的示例。 Sorry for not embedding the image directly within the answer; 很抱歉没有将图片直接嵌入答案中; I apparently need 10 rep points to post images: 我显然需要10个代表点才能发布图像:

https://www.dropbox.com/s/kf6i85d9kvarxzs/safari_screenshot.jpg?dl=0 https://www.dropbox.com/s/kf6i85d9kvarxzs/safari_screenshot.jpg?dl=0

According to changelog, this issue has been addressed in Safari 9.1. 根据changelog的说法,此问题已在Safari 9.1中得到解决。

HTML pseudo-elements are now visible in the DOM tree allowing for easier styling. 现在,HTML伪元素在DOM树中可见,从而可以简化样式。 The ::before element is highlighted in Figure 1. :: before元素在图1中突出显示。

Safari 9.1 Web检查器屏幕截图

Source: https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html 资料来源: https : //developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何放大Safari Web Inspector:“详细信息”边栏? - How to enlarge the Safari Web Inspector: Details sidebar? CSS 伪元素未在 Safari 上正确定位 - CSS Pseudo elements not positioned properly on Safari 检查CSS:在Web检查器中的元素之前 - Inspect CSS :before elements in the web inspector 有没有一种方法可以堆叠不同父元素的伪元素? - Is there a way to stack pseudo elements of different parent elements? urllib2中的数据与Safari的Web检查器中的数据不同 - Different data in urllib2 than in Safari's Web Inspector 有没有一种方法来获取输入的CSS而不是计算出的样式? - Is there a way to get the typed CSS and not the computed style? 除非打开Web检查器,否则Safari上的HTML5 Progress元素不会更改值 - HTML5 Progress Element on Safari won't change value unless the Web Inspector is open 有没有办法在CSS中使用相同的倍数:before和:after伪元素? - Is there a way to have the equivalent of multiple :before and :after pseudo-elements in CSS? 有没有办法使用鼠标使伪元素在Chrome开发者工具中可见? - Is there a way to use the mouse to make pseudo elements visible in Chrome Developer Tools? Firefox为什么在Web检查器中显示带有结束标记的空元素? - Why does Firefox display empty elements with closing tags in its web inspector?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM