• dushu.tw 读书网、小说免费阅读网站

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

软件 jona 54次浏览 已收录 0个评论 扫描二维码

默认情况下,在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频道中分享它们。

快乐的编码!


举个栗子 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Firefox 63中的Web Components支持开发人员工具
喜欢 (0)
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到