我想用这个博客来记录在我的日常UI5应用程序开发生活中使用Chrome开发工具的技巧。

我的Chrome版本是：49.0.2623.54 beta-m（64位）。

在"源"选项卡中，选择源文件，例如"jquery.sap.act-数据库.js，按Ctrl+G，键入"："，按回车键：

到达目的地：

单击"源"->"源"，按Ctrl+O，逐个字符键入文件名。支持自动完成，怎么做淘客推广，搜索非常方便

默认情况下，点击"元素"页签中的小三角形图标，物联网工程课程，

只展开其直接子节点：

使用Alt+click展开其所有子节点

假设只选中1476~1477行中"| |"后的内容。默认情况下是不可能的。

您可以先按Alt，然后像往常一样进行选择（通过拖动鼠标）。

然后完成：

假设您使用"元素"选项卡检查给定UI控件实例的html标记：

您只需在控制台标记中键入"$0"即可获得其引用：

并可在控制台中直接修改其属性，输入后更改立即生效按键：

仍以小费#5中的$0为例。在控制台选项卡中，命令副本（$0）会将此html标记的所有源代码放在笔记本电脑的剪贴板上，

这样您只需单击Ctrl+C即可在其他位置获得它：

命令值将获得当前对象的所有属性值，并将其显示为数组：

确定您可以在链式样式中使用这两个：

假设为排除故障，或研究或其他任何原因，你想执行几行代码，你可以选择它们，然后按Ctrl+Shift+E。我只是以下面的第107~11行为例。

一旦按下，这些代码将自动粘贴到控制台选项卡并执行。结果也会显示在那里。

假设您正在调试代码，您可以保存调用堆栈，以便进一步研究调用函数的方式，

例如，您想将以下调用堆栈信息保存到文本文件中：

您只需键入"控制台.trace"在控制台选项卡中，然后您可以通过Ctrl+C和Ctrl+V导出调用堆栈信息。

用于用户喜欢使用的故障排除目的控制台.log打印有用的痕迹而不是我们自己打印的痕迹很容易迷失在jQuery.sap.log.debug当应用程序在调试模式下运行时。你有没有想过控制台.log生成完全不同的布局以便第一眼就能识别它们？

将以下源代码粘贴到本地测试.html文件：

您将得到以下输出：

格式选项"%c"告诉控制台.log使用通过第二个参数传入的CSS样式。

下面列出了更多选项：

在控制台中使用彩色文本打印输出

另一个示例：

输出：

在控制台中使用彩色文本打印输出彩虹文本

一个技巧，使文本显示在控制台不透明

注入标准控制台.log使用下面的代码：

现在正常的"Hello world"将显示如下：

这个提示对于那些需要根据现有网页制作模型但缺乏所需html知识的人特别有用。例如，如果需要一个模型，其中只包含对这个博客的发布日期的一个小的修改，技术人员就会打开Chrome开发工具，找到对应的DOM元素，人工智能有哪些领域，它代表博客的发布日期：

，并在HTML源代码中将2016年改为2015年，完成了。

现在另一个方便的方法是，输入document.body.contentEditable可编辑=在控制台类型中输入"true"，大数据对比，然后按entry键。

您是否注意到"in SAPUI5 Developer Center"后面的"|"提示？这意味着当前页面被切换到编辑模式。

现在Chrome作为一个普通的文本编辑器工作，你可以改变你在页面中看到的任何文本，而不知道引擎盖下的html源代码。使用这种方法，我刚刚使这个博客成为自SCN成立以来最受欢迎的博客之一。

Jerry更新于2017-02-11

控制台中的这一行也起作用（使当前的html页面可编辑），见下面的示例：

随着promise编程模式在最新版本UI5中的使用越来越广泛，行业大数据分析，调试异步执行的函数变得很困难。例如，如果在下面的第185行设置断点，当触发断点时，没有可用的调用堆栈信息，因此您根本不知道哪个函数触发了load（）的调用。

幸运的是我们有Chrome。您只需点击"Async"复选框，即可刷新应用程序。

这次callstack可用，您可以清楚地知道它是ODataAnnotations。\u loadFromUrl异步触发callback load（）。

您忘记了密码？网上有很多提示告诉你如何找回这个密码。幸运的是我们是开发人员，我们能够使用最有效的方法：打开Chrome开发take，在Elements选项卡中找到密码控件的id。在我的例子中是"password"。

然后在控制台中使用类似jQuery的语法：显示password！

你用过这个快捷菜单吗？如果没有，那么这个例子详细说明了我是如何使用这个技巧来解决一个实际问题的：通过调试

可以快速找到哪些代码改变了UI5应用程序页的标题实际上不可能在本机函数上设置断点（你从来没有机会看到这些本机函数的源代码），这就是原因我在这里使用引号。

我最近在学习Angular，对于Angular呈现的html页面，有一些自动生成的注释，如下所示。

出于自学的目的，我很想知道在哪行代码中角度.js创建这些注释，但是，我无法在本机函数createComment上设置断点。

如何继续？

1. 在文件的第一行设置断点角度.js，启动html页面，触发断点：

2。将下面的JavaScript代码复制到console中并键入enter来执行它。现在，本机函数createComment由以下源代码注入：每次在角度.js，将执行注入的源代码。

3。剩下的任务就是继续调试，调试程序在角度.js调用createComment，其值包含字符串"ngRepeat"。

这正是我想要的

更新于2017-02-06：虽然我已经使用Chrome两年了，但直到今天我才知道这个工具…