标签: web-inspector

如何以编程方式从WebView对象中弹出Webkit的Web Inspector？

我成功在WebView上启用了Webkit的Web Inspector.它运行良好,现在我可以通过单击上下文菜单中的"检查元素"来弹出它.我想用我的按钮做到这一点.但我找不到合适的方法来做到这一点.我的DOM知识已有10年历史,是当今HTML DOM的新手.有没有办法做到这一点？

我找到了一个类文档:InspectorController.我认为这是一种关键.但是我不知道暴露了什么对象以及如何使用它.

环境:

• Mac OS X 10.6
• Xcode 3.2.1(iPhone SDK,无插件)

我正在使用谷歌浏览器开发工具来测试我的网站;

它适用于某些元素,但对于其他元素,它显示选择器但显示没有样式; 元素确实有样式,样式应用于元素.但检查员没有显示任何款式.

如果我单击该检查器的css文件行的链接,我可以看到那里的样式.

我看到一个谷歌小组主题,声明删除任何空url()声明修复了该错误.但是我没有空的url()声明.

我也发现这个有点类似的bug ; 但不完全一样.我注意到的一件事是这个bug提供的用例和我的设置都使用了twitter-bootstrap.我正在使用.less版本的bootstrap,它包含bootstrap到单个css文件中作为copy> paste方法,所以我的css文件有3740行.这可能是问题的一部分吗？

元素不是深嵌套(body > div#container > inspected element).
没有过多的样式应用于元素(<= 10).

点击放大

我正在开发一个拥有大量现有CSS的模板.CSS所做的一件事是扩大和加粗文章第一段的第一个字母.我假设这是一个伪类(如:第一个字母),但我似乎无法在CSS样式表中找到它.

我无法检查Inspector或Firebug中的单个字母,因为它没有包装在HTML标签中

标签它具有不同于这一个字母的样式.

有没有办法检查元素的所有伪元素或检查单个字母

元件？谢谢!

在Safari中的替代步骤之后实现相同的功能也是可以的.或者我是否需要安装Chrome或Firefox？

我不确定我是否是唯一一个,但几个月前,谷歌Chrome Inspector的源搜索(Cmd + Alt + F)对于大型Web应用程序(大型源文件)来说非常慢.它通常需要2~3秒左右,现在需要至少1~2分钟!我发现,但是当代码处于停止点时,不知何故搜索加速退出,我开始搜索代码.但它不是一个可持续的解决方案,而且在不工作的同时又乏味.我的Chrome版本是54.028.

为了解决讨厌的IE浏览器布局和CSS问题,我正在尝试使用IE9的开发人员工具来迭代编辑HTML和CSS.理想情况下,我可以与我曾经使用过Firebug和Webkit的Inspector的DOM/CSS操作工作流程保持一致.

换句话说,我希望能够重复编辑单个元素或元素组的HTML和CSS,然后看到我的更改立即反映在屏幕上.

我已经找到了F12工具的"整页"编辑功能,你可以在这里编辑整个页面的HTML或所有CSS作为一个集团,但即使在使用该工具几个小时之后,阅读在线帮助和许多Google搜索,我仍然在努力使用我曾经使用过Firebug的那种更细粒度的编辑.

在我放弃之前,有没有人知道如何使用F12工具......

• ...编辑特定元素及其子元素,而不是一次编辑整个页面？(像firebug的"编辑HTML"上下文菜单)
• ...看到编辑视图中的更改在浏览器中立即显示,而不是必须退出编辑视图才能看到更改？
• ...在编辑视图中轻松找到当前选定的元素(围绕它的蓝色方块)？
• ...删除单个元素？(在firebug中我可以选择元素并单击"删除")
• ...为类添加新样式而无需搜索文档中的每个样式以找到适用于我关心的元素的样式？(在firebug中,我只需双击右窗格中的样式).

如果使用IE的F12工具无法实现上述功能,那么DOM/CSS编辑是否有一个很好的替代插件？

顺便说一下,我对这个问题的意图不是打击IE9开发工具(对微软来说,包括开箱即用的这些工具的荣誉),而是要学习如何更有效地使用它们.

另外顺便说一句,我已经阅读了20个关于IE上的firebug等价的其他StackOverflow问题,但其中大部分似乎是关于javascript调试和只读DOM检查.我没有找到任何关于编写DOM/CSS的最近(IE9).因此,我正在问另一个关于这个话题的问题......如果这是一个骗局,我道歉.

Safari的Web Inspector允许您从搜索框中执行XPath查询:

但是盒子太小了!你可以使用但不舒服.

是否可以从屏幕截图底部显示的控制台提示符处执行XPath查询？

有什么方法可以在页面中嵌入来自 chrome web 检查器的“控制台”选项卡？

如果我有一个X像素高的表格单元格,我可以看到究竟是什么原因 - 无论是兄弟的高度<td>还是有一个div高度为X像素的孩子？

基本上,我有 我想知道为什么它是172像素,而不是150.身高从未在代码中明确设置.

是否有某个浏览器扩展显示这种事情,并省去了点击每个子/兄弟节点检查它的麻烦？

编辑:我已经知道大多数浏览器都有内置的DOM检查器.但是,并非所有CSS属性都是​​在元素上继承或直接设置的,正如我在第一段中所说的那样.我想知道是否有更好的工具可以显示属性的计算方式.

我正在尝试使用 JS 制作一个类似于检查元素的工具。在大多数浏览器的检查工具中，您可以将鼠标悬停在页面上的元素上并单击它们以显示它们在网站代码中的位置。我能想到模拟这一点的唯一方法是将事件侦听器添加到页面上的每个元素。我觉得这很糟糕，原因有很多。我还有其他方法可以做到这一点吗？如果不是，向页面上的每个元素添加事件侦听器是一个好主意吗？