Chrome 浏览器 tips

Keep one tab for same URL

Duplicate Tab Closer

Network Analysis Reference

Requests Limit

Chrome has a limit of 6 connections per host name, and a max of 10 connections.

Debug Dynamic element

对于动态生成和消失的元素，可能无法直接查看。需要额外处理。

鼠标悬浮元素

Elements, 右键元素, Force state -> :hover。
右键生成菜单

Elements, 右键所属的父元素，Break on -> subtree modifications。会添加断点和冻结页面。

Copy response

Devtools / Network / 选中任意请求 / 右键 Copy -> Copy response

Debug source code

Devtool > Sources

Breakpoint（右击行数）

可以添加触发条件
Logpoint（右击行数）

可以添加需要打印的消息。不再需要临时添加各种console.log到源码了。可以添加触发条件
Call stack
Scope

Local / Closure / Global variables
Console （Esc 调出）

可以动态修改变量

Debug Network

调试请求时，可以右键 Copy -> Copy as fetch / Copy as Node.js fetch

生成该请求的fetch代码，在浏览器 console 或 Node 环境中调试。

Logging Messages

Get Started With Logging Messages In The Console

Console -> Sidebar -> Filter messages

consolo with style (chrome & firefox)

console.log('%c Hello world!', 'background: #222; color: #bada55; border-radius: 2px')

v8 功能：双击选中词语

function tokenize(lang, text) {
  const it = Intl.v8BreakIterator(lang, { type: 'word' })
  it.adoptText(text)
  const words = []

  let cur = 0, prev = 0

  while(cur < text.length) {
    prev = cur
    cur = it.next()
    words.push(text.substring(prev, cur))
  }

  return words
}

console.log(tokenize(['ch-ZH'], '你好好久不见')) // ["你好", "好久", "不见"]
console.log(tokenize(['ja-JP'], 'どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。'))
// ["どこ", "で", "生れ", "たか", "とんと", "見当", "が", "つ", "か", "ぬ", "。", "何でも", "薄暗い", "じめじめ", "した", "所", "で", "ニャーニャー", "泣", "い", "て", "いた事", "だけ", "は", "記憶", "し", "て", "いる", "。"]

Node 中应该以后会用 Intl.Segmenter 代替Intl.v8BreakIterator

查看页面源码

有时候需要在线查看网页的源码

可以通过 DeveTools > Sources > 侧边栏，查看对应网页的 HTML，CSS 和 JavaScript 代码。

容易被忽视的特性

Things you probably didn’t know you could do with Chrome’s Developer Console

获取 DOM 中的事件

getEventListeners($('selector'))

console.table

以表格形式打印数据

console.group

可以对打印出的内容进行分组

console.group('Group A starts')
console.log('content')
console.groupEnd('Group A ends')

console 中的内置命令

前端调试经常用到 Chrome > devtools > console, 了解一些有用内置命令会方便很多。所以找了下官方的内置命令说明文档：

console 命令说明

举例

$_: 返回最近计算的表达式

$0, $1, $2, $3, $4: 最近检查过元素的引用

重新发送网络请求: Replay XHR

devtools > network，右键相关的网络请求，选中Replay XHR，即可。

CL's Blogs