| %c | css 格式字符串"}}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.time(), timeEnd()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"time"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"timeEnd"}]},{"type":"text","text":" 一般放在一起用，传入一个参数用来标识起始位置用于统计时间:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"console.time('t')\nArray(900000).fill({}).forEach((v, index) => v.index = index)\nconsole.timeEnd('t')\n\/\/ t: 28.18603515625ms\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"会打印出中间代码的执行时间"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.count()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"顾名思义。。计数,可以用来统计某个函数的执行次数，也可以传入一个参数，并且根据传入的参数分组统计调用的次数"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"function foo(type = '') {\n type ? console.count(type) : console.count()\n return 'type：' + type\n}\n\nfoo('A') \/\/A: 1\nfoo('B') \/\/B: 1\nfoo() \/\/default: 1\nfoo() \/\/default: 2\nfoo() \/\/default: 3\nfoo('A') \/\/A: 2\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.trace()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用于追踪代码的调用栈，不用专门断点去看了"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"console.trace()\nfunction foo() {\n console.trace()\n}\nfoo()\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/28\/28b7077a67a8695827c922a13dc240ca.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.table()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"console.table()方法可以将复合类型的数据转为表格显示"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var arr = [\n { name: '梅西', qq: 10 },\n { name: 'C 罗', qq: 7 },\n { name: '内马尔', qq: 11 },\n]\nconsole.table(arr)\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/f0\/f02611d801cf892c3edfc99916a1994a.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.dir()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"按便于阅读和打印的形式将对象打印"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var obj = {\n name: 'justwe7',\n age: 26,\n fn: function () {\n alert('justwe7')\n },\n}\nconsole.log(obj)\nconsole.dir(obj)\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c7\/c7e4c4b6efde1e0e5ad499cd5335ee01.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打印 DOM 对象区别："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/ef\/efc91ff5b216cf1a9c94236bb3dc85a8.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.assert()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"断言，用来进行条件判断。当表达式为 false 时，则显示错误信息，不会中断程序执行。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以用于提示用户，内部状态不正确（把那个说假话的揪出来）"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"var val = 1\nconsole.assert(val === 1, '等于 1')\nconsole.assert(val !== 1, '不等于 1')\nconsole.log('代码往下执行呢啊')\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b8\/b85efe4ba2133b359f455dfb89288330.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.group(), groupEnd()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"分组输出信息，可以用鼠标折叠\/展开"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"console.group('分组 1')\nconsole.log('分组 1-1111')\nconsole.log('分组 1-2222')\nconsole.log('分组 1-3333')\nconsole.groupEnd()\nconsole.group('分组 2')\nconsole.log('分组 2-1111')\nconsole.log('分组 2-2222')\nconsole.log('分组 2-3333')\nconsole.groupEnd()\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/a3\/a3fb245c2ed87aff671aea099f03229c.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"$"}]},{"type":"text","text":" 选择器"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"$_"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以记录上次计算的结果，直接用于代码执行:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/50\/5015573748380c27c6dc0d9520eaf8ac.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"$0,$1...$4"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"代表最近 5 个审查元素"},{"type":"text","marks":[{"type":"strong"}],"text":"选中"},{"type":"text","text":"过的 DOM 节点，看图（是要选中一下，我更喜欢用存储全局变量的方式玩，省的自己手残又选了一个节点）："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/fc\/fc82f93d0e64f95c6bbfb6dbec5b9ec8.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"$和$$"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"$(selector)"}]},{"type":"text","text":"是原生 document.querySelector() 的封装。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"$$(selector)"}]},{"type":"text","text":"返回的是所有满足选择条件的元素的一个集合，是 document.querySelectorAll() 的封装"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"$x"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"将所匹配的节点放在一个数组里返回"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n \n li 下的 p1\n li 下的 p2\n li 下的 p3\n \n\n 外面的 p\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"$x('\/\/li') \/\/ 所有的 li\n$x('\/\/p') \/\/ 所有的 p\n$x('\/\/li\/\/p') \/\/ 所有的 li 下的 p\n$x('\/\/li[p]') \/\/ 所有的 li 下的 p\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/29\/29cb9b90ca8af3461dbab24e06268805.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"keys(), values()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"跟 ES6 对象扩展方法， "},{"type":"codeinline","content":[{"type":"text","text":"Object.keys()"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"Object.values()"}]},{"type":"text","text":" 相同"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"keys(obj);\nvalues(obj);"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"copy()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以直接将变量复制到剪贴板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"copy(temp1)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"与 "},{"type":"codeinline","content":[{"type":"text","text":"Save global variable"}]},{"type":"text","text":" 结合使用神器"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Element 面板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此章节请打开 justwe7.github.io\/devtools\/element\/element.html 一起食用"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"组合快捷键按键:Windows: "},{"type":"codeinline","content":[{"type":"text","text":"Control"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Shift"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"C"}]},{"type":"text","text":"Mac: "},{"type":"codeinline","content":[{"type":"text","text":"Command"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Option"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"C"}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"css 调试"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"style"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"选中目标节点，element 面版，查看 style->:hov,选择对应的状态即可"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/54\/54a43ba47581e595c201a33ed813899e.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":"br"}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d7\/d74f4de9088a200b5e5a03165395c7d4.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"computed"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有时候样式覆盖过多，查看起来很麻烦，"},{"type":"codeinline","content":[{"type":"text","text":"computed"}]},{"type":"text","text":" 就派上用场了"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/55\/5568f60914c2e47e0e3ad07fe7f6a8d7.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"点击某个样式可以直接跳转至对应 css 定义"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"调整某个元素的数值"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"选中想要更改的值，按方向键上下就可以 "},{"type":"codeinline","content":[{"type":"text","text":"+ \/ -"}]},{"type":"text","text":" 1 个单位的值"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"alt + 方向键"}]},{"type":"text","text":" 可以 ×10 调整单位值"},{"type":"codeinline","content":[{"type":"text","text":"Ctrl + 方向键"}]},{"type":"text","text":" 可以 ×100 调整单位值"},{"type":"codeinline","content":[{"type":"text","text":"shift + 方向键"}]},{"type":"text","text":" 可以 \/10 调整单位"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"html 调试"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"骚操作"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"选中节点，直接按键盘 "},{"type":"codeinline","content":[{"type":"text","text":"H"}]},{"type":"text","text":" 可以直接让元素显示\/隐藏，不用手动敲样式了，效果等同 "},{"type":"codeinline","content":[{"type":"text","text":"visibility: hidden"}]},{"type":"text","text":"，还是要占据盒模型空间的。（记得把输入法改成英文~）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/32\/329e69ad15b598f27d038bbff1a8a8d6.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"将某个元素存储到全局临时变量中"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"选中节点，右键，"},{"type":"codeinline","content":[{"type":"text","text":"Store as global variable"}]},{"type":"text","text":"（在 network 面板中也能用，尤其是筛选接口的返回值很方便）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c2\/c2f2e37ffac001059d8d6e415e73ce61.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"滚动到某个节点"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果页面很长，想找一个文本节点的显示位置又不想手动滑动可以试试 "},{"type":"codeinline","content":[{"type":"text","text":"Scroll into view"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c4\/c420f95dd6843752d008924a6d1989f4.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Edge 专属的 3D 视图"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用 chromium 后的 Edge 真的是改头换面，"},{"type":"text","marks":[{"type":"strong"}],"text":"3D 视图"},{"type":"text","text":"可以帮忙定位一些定位层级还有 DOM 嵌套的问题，页面结构写的好不好看很直观的可以看出来(跟辅助功能里面的 dom 树结合使用很舒服)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/0c\/0c9b738fedfeb81b16577185f53fb91a.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前 chrome 还是没有这项功能的，Edge 打开位置：控制台打开状态 => "},{"type":"codeinline","content":[{"type":"text","text":"Esc"}]},{"type":"text","text":"打开抽屉 => "},{"type":"codeinline","content":[{"type":"text","text":"···"}]},{"type":"text","text":"选择 3D 视图面板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"DOM 断点"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以监听到 DOM 节点的变更(子节点变动\/属性变更\/元素移除)，并断点至变更 DOM 状态的 js 代码行："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/88\/8898da014932ab5a6882e09efc831a9a.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Network 面板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以查看通过网络请求的资源的相关详细信息"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"组合快捷键按键:"}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Windows: "},{"type":"codeinline","content":[{"type":"text","text":"Control"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Shift"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"I"}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Mac: "},{"type":"codeinline","content":[{"type":"text","text":"Command"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Option"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"I"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"按区域划分大概分为如下几个区域："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c5\/c50769de5a61511e63d0cc7b1f28e5cf.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Controls"}]},{"type":"text","text":" - 控制 Network 功能选项，以及一些展示外观"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Filters"}]},{"type":"text","text":" - 控制在 Requests Table 中显示哪些类型的资源"}]},{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"tips：按住 Cmd (Mac) 或 Ctrl (Windows\/Linux) 并点击筛选项可以同时选择多个筛选项"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Overview"}]},{"type":"text","text":" - 此图表显示了资源检索时间的时间线。如果看到多条竖线堆叠在一起，则说明这些资源被同时检索"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Requests Table"}]},{"type":"text","text":" - 此表格列出了检索的每一个资源。 默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。 提示：右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":6,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Summary"}]},{"type":"text","text":" - 可以一目了然地看到页面的请求总数、传输的数据总量、加载时间"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":7,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"（1、2）Controls，Filters 区域"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/a4\/a477eee5d5c5b5050e7f736d13cdf59c.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Filters 控制的展示："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"使用大请求行"},{"type":"text","text":" - 默认情况下，"},{"type":"codeinline","content":[{"type":"text","text":"Requests Table"}]},{"type":"text","text":"一个资源只显示很小的一行。选中"},{"type":"codeinline","content":[{"type":"text","text":"Use large resource rows"}]},{"type":"text","text":"(使用大资源行)按钮可以显示两个文本字段：主要字段和次要字段。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"捕获屏幕截图"},{"type":"text","text":" - 将鼠标悬停在某个屏幕截图上的时候，Timeline\/Waterfall(时间轴)会显示一条垂直的黄线，指示该帧是何时被捕获的"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"显示概述"},{"type":"text","text":" - 展示页面整个生命周期的各个阶段（Overview 区域）的耗时（蓝色绿色的那些横杠）"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"（3） Overview 区域"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"页面整个生命周期的各个阶段网络资源加载耗时信息的汇总，可以选择区域来筛选 "},{"type":"codeinline","content":[{"type":"text","text":"Requests Table"}]},{"type":"text","text":" 的详细资源信息"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"(4) Requests Table 区域"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"标题栏的对应描述："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Name"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(名称)"},{"type":"text","text":": 资源的名称。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Status"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(状态)"},{"type":"text","text":": HTTP 状态代码。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Type"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(类型)"},{"type":"text","text":": 请求的资源的 MIME 类型。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Initiator"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(发起)"},{"type":"text","text":": 发起请求的对象或进程。它可能有以下几种值："}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Parser"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(解析器)"},{"type":"text","text":": Chrome 的 HTML 解析器发起了请求。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Redirect"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(重定向)"},{"type":"text","text":": HTTP 重定向启动了请求。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Script"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(脚本)"},{"type":"text","text":": 脚本启动了请求。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Other"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(其他)"},{"type":"text","text":": 一些其他进程或动作发起请求，例如用户点击链接跳转到页面，或在地址栏中输入网址。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Size"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(大小)"},{"type":"text","text":": 响应头的大小（通常是几百字节）加上响应数据，由服务器提供。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Time"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(时间)"},{"type":"text","text":": 总持续时间，从请求的开始到接收响应中的最后一个字节"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Timeline\/Waterfall"}]},{"type":"text","marks":[{"type":"strong"}],"text":"(时间轴)"},{"type":"text","text":": 显示所有网络请求的可视化统计信息"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在标题栏如(Name 上)右键，可以添加或删除信息列。比如可以多加一列 Response Header => Content-Encoding 选项来总览页面资源的 gzip 压缩情况:"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/9f\/9fa3ccdd2ae3642f52d30f95806e7322.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"重新发起"},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong"}],"text":"xhr"}]},{"type":"text","text":"请求"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在平时和后端联调时，我们用的最多的可能就是"},{"type":"codeinline","content":[{"type":"text","text":"Network"}]},{"type":"text","text":"面板了。但是每次想重新查看一个请求通过刷新页面、点击按钮等方式去触发"},{"type":"codeinline","content":[{"type":"text","text":"xhr"}]},{"type":"text","text":"请求，这种方式有时显得会比较麻烦，可以通过"},{"type":"codeinline","content":[{"type":"text","text":"Replay XHR"}]},{"type":"text","text":"的方式去发起一条新的请求："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/4d\/4d716d59ccc7a73f699bd8723cacafd4.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"查看 HTTP 相关信息"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"查看网络请求的参数"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以通过点击 "},{"type":"codeinline","content":[{"type":"text","text":"query string parameters"}]},{"type":"text","text":" (查询字符串参数)旁边的 "},{"type":"codeinline","content":[{"type":"text","text":"view URL encoded"}]},{"type":"text","text":" (查看 URL 编码)或 "},{"type":"codeinline","content":[{"type":"text","text":"view decoded"}]},{"type":"text","text":" (查看解码)链接，查看 URL 编码或解码格式的 "},{"type":"codeinline","content":[{"type":"text","text":"query string parameters"}]},{"type":"text","text":" (查询字符串参数)。在使用 postman 复制相关入参时尤其实用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d7\/d744e84cbd2ecec898c6c694d0c2115e.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"查看 HTTP 响应内容"},{"type":"text","text":"点击 Response(响应)标签页可以查看该资源未格式化的 HTTP 响应内容"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接口的返回值(在 preview 中）同样也可以 "},{"type":"codeinline","content":[{"type":"text","text":"Save global variable"}]},{"type":"text","text":" 存储一个全局变量"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/cd\/cda2dafb5c827cf6340316ed2e4e5ff4.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Size 和 Time 为什么有两行参数？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/a7\/a7155cc3a8fa92ab548d4cb30966b736.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"关于 Size 列"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Size"}]},{"type":"text","text":"有两行："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一行表示的是数据的"},{"type":"text","marks":[{"type":"strong"}],"text":"传输时"},{"type":"text","text":"的大小，例如上图中的"},{"type":"codeinline","content":[{"type":"text","text":"190KB"}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二行表示的是数据"},{"type":"text","marks":[{"type":"strong"}],"text":"实际"},{"type":"text","text":"的大小"},{"type":"codeinline","content":[{"type":"text","text":"708KB"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在服务器端采取"},{"type":"codeinline","content":[{"type":"text","text":"gzip"}]},{"type":"text","text":"压缩算法将原有"},{"type":"codeinline","content":[{"type":"text","text":"708KB"}]},{"type":"text","text":"压缩至"},{"type":"codeinline","content":[{"type":"text","text":"190KB"}]},{"type":"text","text":",传输大小缩短"},{"type":"codeinline","content":[{"type":"text","text":"3.7 倍"}]},{"type":"text","text":"，大大的提高了资源传输的效率"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"需要注意的点："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"gzip"}]},{"type":"text","text":"压缩只会压缩"},{"type":"codeinline","content":[{"type":"text","text":"响应体"}]},{"type":"text","text":"内容，所以适用于返回数据量大的时候，如果数据量太小的话，有可能会导致数据"},{"type":"text","marks":[{"type":"strong"}],"text":"传输时"},{"type":"text","text":"的大小比"},{"type":"text","marks":[{"type":"strong"}],"text":"实际"},{"type":"text","text":"大小要大("},{"type":"text","marks":[{"type":"italic"}],"text":"加入了一些额外的响应头"},{"type":"text","text":")"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"关于 Time 列"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Time 有两行："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一行表示从客户端发送请求到服务端返回所有数据所花费的总时间，对于上图来说就是"},{"type":"codeinline","content":[{"type":"text","text":"471ms"}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二行表示的是从客户端发送请求到服务器端返回第一个字节所表示的时间，对于上图来说就是"},{"type":"codeinline","content":[{"type":"text","text":"55ms"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一行的时间代表了所有项目：例如"},{"type":"codeinline","content":[{"type":"text","text":"解析 dns"}]},{"type":"text","text":"，"},{"type":"codeinline","content":[{"type":"text","text":"建立连接"}]},{"type":"text","text":"，"},{"type":"codeinline","content":[{"type":"text","text":"等待服务器返回数据"}]},{"type":"text","text":"，"},{"type":"codeinline","content":[{"type":"text","text":"传输数据"}]},{"type":"text","text":"等"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二行的时间是 "},{"type":"codeinline","content":[{"type":"text","text":"总时间 - 数据传输"}]},{"type":"text","text":"的时间"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"从上面的分析中我们看到 从"},{"type":"text","marks":[{"type":"strong"}],"text":"客户端请求到服务器处理结束准备返回数据"},{"type":"text","text":"花了"},{"type":"codeinline","content":[{"type":"text","text":"55ms"}]},{"type":"text","text":"，但是在进行"},{"type":"text","marks":[{"type":"strong"}],"text":"传输数据"},{"type":"text","text":"的时候花费了"},{"type":"codeinline","content":[{"type":"text","text":"471ms"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"对于网慢的用户来说，可能会耗费更长的时间，所以在写代码（接口）的时候，返回的数据量要尽量精简"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Waterfall"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"点击某个资源会展示出详细的网络加载信息："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/2c\/2c3ac8e172773e919d60eeb649b3db8f.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相关字段描述:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Queuing"}]},{"type":"text","text":" (排队)"}]},{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"浏览器在以下情况下对请求排队"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"存在更高优先级的请求,请求被渲染引擎推迟，这经常发生在 images（图像）上,因为它被认为比关键资源（如脚本\/样式）的优先级低。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此源已打开六个 TCP 连接，达到限值，仅适用于 HTTP\/1.0 和 HTTP\/1.1。在等待一个即将被释放的不可用的 TCP socket"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"浏览器正在短暂分配磁盘缓存中的空间，生成磁盘缓存条目（通常非常快）"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Stalled"}]},{"type":"text","text":" (停滞) - 发送请求之前等待的时间。它可能因为进入队列的任意原因而被阻塞，这个时间包括代理协商的时间。请求可能会因 Queueing 中描述的任何原因而停止。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"DNS lookup"}]},{"type":"text","text":" (DNS 查找) - 浏览器正在解析请求 IP 地址，页面上的每个新域都需要完整的往返(roundtrip)才能进行 DNS 查找"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Proxy Negotiation"}]},{"type":"text","text":" - 浏览器正在与代理服务器协商请求"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"initial connection"}]},{"type":"text","text":" (初始连接) - 建立连接所需的时间，包括 TCP 握手\/重试和协商 SSL。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"SSL handshake"}]},{"type":"text","text":" (SSL 握手) - 完成 SSL 握手所用的时间"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Request sent"}]},{"type":"text","text":" (请求发送) - 发出网络请求所花费的时间，通常是几分之一毫秒。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Waiting"}]},{"type":"text","text":" (等待) - 等待初始响应所花费的时间，也称为"},{"type":"codeinline","content":[{"type":"text","text":"Time To First Byte"}]},{"type":"text","text":"(接收到第一个字节所花费的时间)。这个时间除了等待服务器传递响应所花费的时间之外，还包括 1 次往返延迟时间及服务器准备响应所用的时间（服务器发送数据的延迟时间）"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Content Download"}]},{"type":"text","text":"(内容下载) - 接收响应数据所花费的时间(从接收到第一个字节开始，到下载完最后一个字节结束)"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"ServiceWorker Preparation"}]},{"type":"text","text":" - 浏览器正在启动 Service Worker"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Request to ServiceWorker"}]},{"type":"text","text":" - 正在将请求发送到 Service Worker"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Receiving Push"}]},{"type":"text","text":" - 浏览器正在通过 HTTP\/2 服务器推送接收此响应的数据"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Reading Push"}]},{"type":"text","text":" - 浏览器正在读取之前收到的本地数据"}]}]}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/cf\/cf499091ee26378f9741fa997d29eb1e.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"(5) Summary 区域"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/63\/63754c30592ef00962d1521f590914ba.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"requests"}]},{"type":"text","text":" 查看请求的总数量 | "},{"type":"codeinline","content":[{"type":"text","text":"transferred"}]},{"type":"text","text":" 查看请求的总大小 | "},{"type":"codeinline","content":[{"type":"text","text":"resources"}]},{"type":"text","text":" 资源 | "},{"type":"codeinline","content":[{"type":"text","text":"Finish"}]},{"type":"text","text":" 所有 http 请求响应完成的时间 | DOMContentLoaded 时间 | load 时间"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当页面的初始的标记被解析完时，会触发 "},{"type":"codeinline","content":[{"type":"text","text":"DOMContentLoaded"}]},{"type":"text","text":"。 它在 Network(网络)面板上的显示："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Overview (概览)窗格中的蓝色垂直线表示这个事件。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Requests Table (请求列表)中的红色垂直线也表示这个事件。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Summary (概要)窗格中，您可以查看事件的确切时间。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d2\/d240bb77770d616a268cd54a3bf1fb80.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当页面完全加载时触发 "},{"type":"codeinline","content":[{"type":"text","text":"load"}]},{"type":"text","text":" 事件。 它显示也显示在："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Overview (概览)窗格的红色垂直线表示这个事件。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Requests Table (请求列表)中的红色垂直线也表示这个事件。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Summary (概要)中，可以查看改事件的确切时间"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/81\/817803eb6c46e42c32fabd04e5eca875.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"DOMContentLoaded 会比 Load 时间小，两者时间差大致等于外部资源加载（一般是图片\/字体）的时间"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Finish 时间是页面上所有 http 请求发送到响应完成的时间（如果页面存在一个轮询的接口，这个值也会累加的）。HTTP1.0\/1.1 协议限定单个域名的请求并发量是 6 个，即 Finish 是所有请求（不只是 XHR 请求，还包括 DOC，img，js，css 等资源的请求）在并发量为 6 的限制下完成的时间。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Finish 的时间比 Load 大，意味着页面有相当部分的请求量"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Finish 的时间比 Load 小，意味着页面请求量很少，如果页面是只有一个 html 文档请求的静态页面，Finish 时间基本就等于 HTML 文档请求的时间"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以 Finish 时间与 DOMContentLoaded 和 Load 并无直接关系"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"头图：Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者：李华西"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：https:\/\/mp.weixin.qq.com\/s\/G8e82OZp3vqsw-ihHmFQIA"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：Chrome DevTools 全攻略！助力高效开发"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"来源：微医大前端技术 - 微信公众号 [ID：wed_fed]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"转载：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}]}]} |
{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Console 面板"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此章节请打开 justwe7.github.io\/devtools\/console\/console.html 一起食用"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools 等进行交互"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"组合快捷键按键:Windows: "},{"type":"codeinline","content":[{"type":"text","text":"Control"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Shift"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"J"}]},{"type":"text","text":"Mac: "},{"type":"codeinline","content":[{"type":"text","text":"Command"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"Option"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"J"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先看一下 console 对象下面都有哪些方法:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/48\/48f1004824977a9f2fe978c6167fbca4.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.clear()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"顾名思义，清空控制台"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"console.log(), info(), warn(), error()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"日常用的比较多的就是这几个了，其中 "},{"type":"codeinline","content":[{"type":"text","text":"log"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"info"}]},{"type":"text","text":"，印象中在 2016 年之前老用 info 打印，还是有区别的，"},{"type":"codeinline","content":[{"type":"text","text":"info"}]},{"type":"text","text":" 输出的内容前面是有一个蓝色背景的小圈, 大概跟这个差不多: i，后来 chrome 更新就没了(IE 还是可以看出差别的)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"console.log('普通信息')\nconsole.info('提示性信息')\nconsole.error('错误信息')\nconsole.warn('警示信息')\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/f8\/f84d946cf19a10fffc8e6fcf6b632391.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"使用占位符"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"\/\/ 支持逗号分隔参数，不需要每个参数都单独打印\nconsole.log(1, '2', +'3')\n\/\/ 占位符\n\/\/ %s \nconsole.log('今晚%s 老虎', '打', '？？？')\n\/\/ %c \nconsole.log('今晚%s%c 老虎', '打', 'color: red', '？？？')\n\/\/ 带有占位符的参数之后的若干参数属于占位符的配置参数\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d2\/d2544a9502f3b8816484c20dae914fda.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其余的占位符列表还有："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"embedcomp","attrs":{"type":"table","data":{"content":"