Chrome 开发者工具中 Elements(元素）断点的用途

SAP Engagement Center UI 的这个按钮会每秒钟刷新一次，显示页面已经打开了多长时间。

需求：需要找到哪行 JavaScript 代码不断刷新的按钮文字。

按照经验判断，这个文字肯定是一个 JavaScript function 通过 setTimeout 每隔一秒执行的。如何快速找到这个 function 以及 setTimeout 的调用位置呢？

1. 利用 Chrome 开发者工具的 Elements 标签页功能，找到该按钮 HTML 源代码对应的标签。

2. 右键单击该标签，选择 Break on->subtree modification:

一秒钟之后，断点会自动触发，停留在该元素的 innerHTML 发生变化的代码位置。从代码 478 我们得知，UI 上按钮的文字能够刷新，是因为其 dom 元素的 innerHTML 属性被修改的缘故。

从调用栈也能迅速找到 setTimeout 的调用位置和调用间隔(1 秒)

更多 Jerry 的 Chrome 开发者工具使用心得，请参考 Jerry 的公众号文章：Jerry和您聊聊Chrome开发者工具

github 地址：https://github.com/dundalek/markmap

作者的 readme 写得很简单。

今天有同事问作者提供的例子到底怎么跑。这里我就写一个更详细的步骤出来。

首先查看 example.parse.js 的内容：

var fs = require('fs');
var parse = require('../parse.markdown');
var transform = require('../transform.headings');
var text = fs.readFileSync('gtor.md', 'utf-8');
var headings = parse(text);
var root = transform(headings);
console.log(root);
fs.writeFileSync('gtor.json', JSON.stringify(root));

使用 nodejs 命名 node example.parse.js 执行这段代码：代码读取包含思维导图的本地文件 gtor.md, 解析并转换生成本地文件 gtor.json.

然后查看 example.view.js, 发现作者使用了 d3 来做 UI 的渲染。

d3.json("gtor.json", function(error, data) {
if (error) throw error;
  markmap('svg#mindmap', data, {
      preset: 'default', // or colorful
      linkShape: 'diagonal' // or bracket  });});

如果直接双击 examples 文件夹里的 index.html 文件在浏览器里打开，会出现跨域错误导致本地文件 gtor.json 无法访问：

必须把这个 example 部署到服务器上运行才行。

为了简单起见，我做了一个简单的封装。如果您想跑跑例子看看效果，只需要下载我的 project 到本地：https://github.com/i042416/jerrylist

直接在本地用 nodejs 命令行启动服务器：

node local.js

然后 localhost:3000/mindmap 即可看到思维导图的效果