简介
stack-frame-overlay 是一个由 Uber 开源的一个 npm 包，它是一个 web 调试工具，能够在页面上很方便地展示 JavaScript 调用栈信息。
这个工具提供了一个全局对象 __stack_frame_overlay_handler，将其插入到全局作用域中，这个对象包含了一些方法，你可以利用这些方法来控制某个特定的元素（例如调用栈视图）。
安装方式
你可以使用 npm 将 stack-frame-overlay 安装到你的项目中，使用命令行：npm install stack-frame-overlay
使用方式
使用上述命令来安装之后，这个库的使用非常简单。首先，你需要在页面上的输入框中输入 JavaScript 代码，然后当你调试这些代码时，你可以按照下面的方式使用 stack-frame-overlay 来展示调用栈视图。
-- -------------------- ---- -------
---------------------------------------
----- -----
--------- -
---- ------
----- ------
------- ------
------ ------
--
---上面的代码将调用栈覆盖在整个页面上。您也可以将其放在最顶部或者其他你想放置的位置。
__stack_frame_overlay_handler.install({
show: true,
position: {
top: '0px',
left: '0px',
},
});上面的代码将调用栈覆盖在页面的左上角。
教程
下面我们将探讨这个库的各种方法以及如何使用它们：
install(options)
install 方法是这个库中最重要的一个方法， 它能够在页面上展示调用栈视图。 在执行这个方法时，你可以提供一些配置项。
options.show: 一个布尔类型的值，表示是否将调用栈视图展示。默认是 false。
options.position：一个对象，表示调用栈视图的位置。
options.width、options.height：调用栈视图的宽度、高度。
activateRow(rowElement)
activateRow 方法选中指定的一行信息。你需要提供调用行元素作为参数。
const rowEl = document.getElementById('stack-frame-overlay-row');
__stack_frame_overlay_handler.activateRow(rowEl);deactivateRow(rowElement)
deactivateRow 方法取消选中指定的行。你需要提供调用行元素作为参数。
const rowEl = document.getElementById('stack-frame-overlay-row');
__stack_frame_overlay_handler.deactivateRow(rowEl);scrollToLine(lineNumber)
scrollToLine 方法滚动到调用视图中指定的行号。 你需要提供行号作为参数。
__stack_frame_overlay_handler.scrollToLine('99');scrollToTop(frameElement)
scrollToTop 方法滚动在指定帧元素置顶。在调用栈视图中，每个帧都对应一个 HTML 元素，你需要提供这个元素作为参数。
const frameEl = document.getElementById('stack-frame-overlay-row-10');
__stack_frame_overlay_handler.scrollToTop(frameEl);scrollToBottom(frameElement)
scrollToBottom 方法滚动在指定帧元素置底。在调用栈视图中，每个帧都对应一个 HTML 元素，你需要提供这个元素作为参数。
const frameEl = document.getElementById('stack-frame-overlay-row-10');
__stack_frame_overlay_handler.scrollToBottom(frameEl);expandRow(rowElement)
expandRow 方法展开指定行。你需要提供调用行元素作为参数。
const rowEl = document.getElementById('stack-frame-overlay-row');
__stack_frame_overlay_handler.expandRow(rowEl);collapseRow(rowElement)
collapseRow 方法收起指定行。你需要提供调用行元素作为参数。
const rowEl = document.getElementById('stack-frame-overlay-row');
__stack_frame_overlay_handler.collapseRow(rowEl);示例代码
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ------ ---------------- --------------------------- ---------- ------- ------ ---------- ----------------------------- -------------------- -------- ------------------------------- -------- -------------------------------------------------------------------------------- -------- ----------------------- ---------- ---------- ------------------------------------------------ -------------------- --- ---------- ----------------- ------------------------------------------ --------- ----- ------------- - --------- ------ ---------- ------ ------------ ------ ----------- ------ ------ ------ --- -- ---------- ------- -------
在这个示例代码中，我们创建了一个按钮和一个多行文本框， 当你在文本框中输入一些 JavaScript 代码，然后点击「运行」按钮时，代码将被执行并且 stack-frame-overlay 将在页面上展示 JavaScript 调用栈信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005566881e8991b448d33c1