[英]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: 铬:
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中突出显示。
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.