Firefox 63中的Web Components支持开发人员工具

栏目: IT资讯 · 发布时间: 7年前

默认情况下,在Firefox 63中启用了Shadow DOM和 Web Components ,开发人员 工具 已为它们做好准备了! 如果您在项目中使用Web Components,或想要试验,请 下载Nightly ,并查看我们如何将这些新技术集成到Inspector和Debugger中
现在可以检查<template>元素,它们可用于创建自定义元素的内部Shadow DOM结构,就像检查其他类型的节点一样。

Firefox 63中的Web Components支持开发人员工具

还可以检查元素内的 Shadow DOM 在Inspector中查找#shadow-root节点 - 并注意它也是用它创建的模式(关闭或打开)。

Firefox 63中的Web Components支持开发人员工具

如果您的Shadow DOM包含插槽,您也可以检查它们!

Firefox 63中的Web Components支持开发人员工具

作为一个很好的奖励,如果你点击一个开槽节点上的箭头图标,你将跳转到原始节点的位置:

Firefox 63中的Web Components支持开发人员工具

说到跳跃,如果你想从Inspector中的自定义元素跳转到调试器中的定义,你可以通过点击元素旁边的自定义徽章来实现:

Firefox 63中的Web Components支持开发人员工具

最后,您可以在Inspector右侧的CSS窗格中查看CSS级联如何影响Shadow DOM,修改样式,检查布局等。

Firefox 63中的Web Components支持开发人员工具

我们希望能帮助您完成Web组件的工作。 与往常一样,我们正在努力改进开发人员工具 - 您可以 查看接下来会发生什么 。 如果您发现了错误,或者有一些建议或反馈,我们非常欢迎您在 DevTools的Slack社区或IRC频道 中分享它们。

快乐的编码!

Linux公社的RSS地址: https://www.linuxidc.com/rssFeed.aspx

本文永久更新链接地址: https://www.linuxidc.com/Linux/2018-09/153961.htm


以上所述就是小编给大家介绍的《Firefox 63中的Web Components支持开发人员工具》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

微创新

微创新

德鲁•博迪、雅各布•戈登堡 / 钟莉婷 / 中信出版社 / 2014-4-5 / 42.00

好产品不一定要颠覆,微小改进就能让用户尖叫! 引爆创新领域的全新方法论 互联网时代行之有效的5大创新策略 创业者、产品经理必读的创新行动指南 《怪诞行为学》作者 丹•艾瑞里 《影响力》作者 罗伯特•西奥迪尼 全球50位最具影响力的商业思想家之一丹尼尔•平克 周鸿祎、黎万强、罗振宇、牛文文、张鹏 联袂重磅推荐 为什么iPod可以在众多mp3产品中......一起来看看 《微创新》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具