说明
某一天，我突然发现 chrome 浏览器竟是熟悉的陌生人，感觉好多操作都不知道，于是，我看了一些大佬写的笔记，自己把不会的一些整理了一下，记录起来，忘记的时候偶尔来看一看。
1、开发者工具里 Run Command
打开 Chrome 开发者工具，然后使用快捷键 Ctrl + Shift + P 打开命令菜单：
1.1 切换 chrome 主题
输入下面命令可以进行主题切换
- Switch to dark theme
- Switch to light theme
也可以输入 theme ，下面就会出现主题的切换，比如你现在是 light 主题，就会给你 dark 主题的切换选择
选了这之后，开发者工具就变成了 dark 主题
1.2 屏幕截图
- Capture full size screenshot：用于截取网页上所有内容的屏幕快照，包括可视窗口中未出现的所有内容
- Capture node screenshot：用于精确捕获 DOM 元素的内容
比如：我选择第一个命令 Capture full size screenshot
就会下载下来一张图片：可以看到这张图片，出现了页面未出现的所有内容
我们先选中这个 a 标签：
在使用第二个命令：
我们可以看到下载下来就是 a 标签这个部分的。
2、开发者工具里 Network
2.1 重新发送XHR请求
- 打开网络面板
- 点击 Fetch/XHR 按钮
- 选择重新发送的 XHR 请求
- 重发 Replay XHR
2.2 在控制台用 fetch 快速发起请求
- 选择重新发送的 XHR 请求
- 右键选择 copy 里的 Copy as fetch
- 粘贴到控制台
- 可以自己修改参数，回车执行
粘贴 Ctrl + v 到控制台执行：
你就发现调用了：
2.3 复制图片的Data URI
找到图片的 preview 然后右击选择 Copy image as data URI
下面链接就可以直接在浏览器上访问
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTc2cHgiIGhlaWdodD0iMTcycHgiIHZpZXdCb3g9IjAgMCAxNzYgMTcyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPue8lue7hCAy5aSH5Lu9IDI8L3RpdGxlPgogICAgPGRlZnM+CiAgICAgICAgPHJhZGlhbEdyYWRpZW50IGN4PSIzOC4xNzQ3MjEzJSIgY3k9Ijg2LjA3NzY2MDElIiBmeD0iMzguMTc0NzIxMyUiIGZ5PSI4Ni4wNzc2NjAxJSIgcj0iOTcuMDY3Mzc5JSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgwLjM4MTc0NywwLjg2MDc3Nyksc2NhbGUoMC44NTUzNjUsMS4wMDAwMDApLHJvdGF0ZSgtNDYuMzAwNTEyKSx0cmFuc2xhdGUoLTAuMzgxNzQ3LC0wLjg2MDc3NykiIGlkPSJyYWRpYWxHcmFkaWVudC0xIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzE3OEY2NyIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMzFDQzc5IiBzdG9wLW9wYWNpdHk9IjAuNTUiIG9mZnNldD0iNTQuNjg0NzY4NCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzUzRTY4RCIgc3RvcC1vcGFjaXR5PSIwLjgiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgICAgICAgPHBhdGggZD0iTTc2LjU2Njk3MzQsNy4xMDU0MjczNmUtMTUgTDc3LjEzMjI0ODUsNy4xMDU0MjczNmUtMTUgTDc3LjYzMTcxMzMsNy4xMDU0MjczNmUtMTUgTDc3LjYzMTcxMzMsNy4xMDU0MjczNmUtMTUgTDc4LjE0MDg3NzEsMC4wMDI1ODQ4ODQyNyBMNzguMTQwODc3MSwwLjAwMjU4NDg4NDI3IEw3OC42NTk2NTc0LDAuMDA1MzE2NTM5MjUgTDc4LjY1OTY1NzQsMC4wMDUzMTY1MzkyNSBMNzkuMTg3OTcxNywwLjAwOTA2MjU4ODkxIEw3OS4xODc5NzE3LDAuMDA5MDYyNTg4OTEgTDc5LjcyNTczNzQsMC4wMTM4NjQyMjI4IEw3OS43MjU3Mzc0LDAuMDEzODY0MjIyOCBMODAuMjcyODcyMywwLjAxOTc2MjYzMDYgTDgwLjI3Mjg3MjMsMC4wMTk3NjI2MzA2IEw4MC44MjkyOTM3LDAuMDI2Nzk5MDAxOCBMODAuODI5MjkzNywwLjAyNjc5OTAwMTggTDgxLjIwNTM1OTgsMC4wMzIxNDI0NTg0IEw4MS4yMDUzNTk4LDAuMDMyMTQyNDU4NCBMODEuNTg1NDkyMSwwLjAzODAyMjE4NzIgTDgxLjU4NTQ5MjEsMC4wMzgwMjIxODcyIEw4Mi4xNjMyNjE1LDAuMDQ3ODczOTg4MSBMODIuMTYzMjYxNSwwLjA0Nzg3Mzk4ODEgTDgyLjc1MDA0MjYsMC4wNTkwMDEwNTExIEw4Mi43NTAwNDI2LDAuMDU5MDAxMDUxMSBMODMuMzQ1NzUyOSwwLjA3MTQ0NDU2NTYgTDgzLjM0NTc1MjksMC4wNzE0NDQ1NjU2IEw4My43NDc4MTMxLDAuMDgwNDkxOTQ0NSBMODMuNzQ3ODEzMSwwLjA4MDQ5MTk0NDUgTDg0LjM1ODIyMjEsMC4wOTUyMjEwNzc1IEw4NC4zNTgyMjIxLDAuMDk1MjIxMDc3NSBMODQuOTc3MzQwNSwwLjExMTM3NjUwMSBMODQuOTc3MzQwNSwwLjExMTM3NjUwMSBMODUuNjA1MDg1NywwLjEyODk5OTQwNSBMODUuNjA1MDg1NywwLjEyODk5OTQwNSBMODYuMDI4MzM0NCwwLjE0MTU4MzYxNCBMODYuMDI4MzM0NCwwLjE0MTU4MzYxNCBMODYuNjcwMjc0NCwwLjE2MTc0Mzg1IEw4Ni42NzAyNzQ0LDAuMTYxNzQzODUgTDg3LjMyMDYyMTMsMC4xODM0ODE0MDYgTDg3LjMyMDYyMTMsMC4xODM0ODE0MDYgTDg3Ljc1ODgxNTcsMC4xOTg4Njk3MzggTDg3Ljc1ODgxNTcsMC4xOTg4Njk3MzggTDg4LjIwMDY4NTQsMC4yMTQ5ODk2MTEgTDg4LjIwMDY4NTQsMC4yMTQ5ODk2MTEgTDg4LjY0NjIwNiwwLjIzMTg1MzIzMSBMODguNjQ2MjA2LDAuMjMxODUzMjMxIEw4OS4wOTUzNTMsMC4yNDk0NzI4MDEgTDg5LjA5NTM1MywwLjI0OTQ3MjgwMSBMODkuNTQ4MTAyMSwwLjI2Nzg2MDUyNSBMODkuNTQ4MTAyMSwwLjI2Nzg2MDUyNSBMOTAuMDA0NDI4NywwLjI4NzAyODYwNyBMOTAuMDA0NDI4NywwLjI4NzAyODYwNyBMOTAuNjk1NTczMSwwLjMxNzI3MDYwMSBMOTAuNjk1NTczMSwwLjMxNzI3MDYwMSBMOTEuMTYwNzM2OCwwLjMzODQ0Mjk3NSBMOTEuMTYwNzM2OCwwLjMzODQ0Mjk3NSBMOTEuODY1MDIyMywwLjM3MTc0ODYxMiBMOTEuODY1MDIyMywwLjM3MTc0ODYxMiBMOTIuMzM4ODcwMiwwLjM5NTAwMTU1NCBMOTIuMzM4ODcwMiwwLjM5NTAwMTU1NCBMOTIuODE2MTQ5MiwwLjQxOTEwODA3OSBMOTIuODE2MTQ5MiwwLjQxOTEwODA3OSBMOTMuNTM4NDQ3MiwwLjQ1Njg5NTAzNyBMOTMuNTM4NDQ3MiwwLjQ1Njg5NTAzNyBMOTQuMDI0MTk2NywwLjQ4MzE4ODkxOCBMOTQuMDI0MTk2NywwLjQ4MzE4ODkxOCBMOTQuNTEzMjkxNiwwLjUxMDM3OTA5OSBMOTQuNTEzMjkxNiwwLjUxMDM3OTA5OSBMOTUuMDA1NzA3NSwwLjUzODQ3Nzc4NSBMOTUuMDA1NzA3NSwwLjUzODQ3Nzc4NSBMOTUuNTAxNDIsMC41Njc0OTcxNzkgTDk1LjUwMTQyLDAuNTY3NDk3MTc5IEw5Ni4wMDA0MDQ2LDAuNTk3NDQ5NDg1IEw5Ni4wMDA0MDQ2LDAuNTk3NDQ5NDg1IEw5Ni41MDI2MzY5LDAuNjI4MzQ2OTA5IEw5Ni41MDI2MzY5LDAuNjI4MzQ2OTA5IEw5Ny4wMDgwOTI1LDAuNjYwMjAxNjU0IEw5Ny4wMDgwOTI1LDAuNjYwMjAxNjU0IEw5Ny41MTY3NDY5LDAuNjkzMDI1OTI1IEw5Ny41MTY3NDY5LDAuNjkzMDI1OTI1IEw5OC4wMjg1NzU3LDAuNzI2ODMxOTI2IEw5OC4wMjg1NzU3LDAuNzI2ODMxOTI2IEw5OC41NDM1NTQ1LDAuNzYxNjMxODYxIEw5OC41NDM1NTQ1LDAuNzYxNjMxODYxIEMxMTcuMDM0Mzk4LDIuMDI1MzA0OCAxMjEuOTMxNTEzLDE1LjM0MTQ3NTIgMTIyLjQ1MjYsMTYuOTM0ODY2NCBMMTIyLjQ4MDAwNywxNy4wMjA0MjI4IEwxMjIuNDgwMDA3LDE3LjAyMDQyMjggTDEyMi41MDEyOTMsMTcuMDkwNTE2NiBMMTIyLjUwMTI5MywxNy4wOTA1MTY2IEwxMzAuNTI4NDYzLDE3LjUyNzU5NyBMMTMwLjUyODQ2MywxNy41Mjc1OTcgQzEzMC45NTY4MjksMTcuNTI3NTk3IDEzMS4zMDQwODgsMTcuODc0ODU2MyAxMzEuMzA0MDg4LDE4LjMwMzIyMjMgQzEzMS4zMDQwODgsMTguNjEwMjUxNSAxMzEuMTI1NjkzLDE4Ljg3NTYxNDMgMTMwLjg2NjkwMiwxOS4wMDEzMTEgQzEyMi42MjcyODUsMjMuNDU5ODY0IDEyMC4xMTAwNTQsMzIuNTE5NDQ1MSAxMjEuNTg5OTU2LDM4LjQyMDc2NjggQzEyMi4wNjY5MTMsNDAuMzIyNzAxNiAxMjIuODA3OTUxLDQxLjk1NzYzODUgMTIzLjYzMjkyOCw0My42ODU3MTQ0IEwxMjQuMTU0MTY2LDQ0Ljc3MzQ2MzUgQzEyNi4wNjM4Miw0OC43Njc2NzM2IDEyOC4yMDc5MjUsNTMuNjA0MTIwOCAxMjguNTU4MDU0LDYzLjMzODAxODQgQzEyOS4zNDE4MTEsODUuMTI3MjE1NCAxMTAuMTg4Nzc1LDEwNC43MTA2NjkgODcuNTI1NjcwOSwxMDQuNzEwNjY5IEw4Ny4yNzc2NzczLDEwNC43MTA3NjggTDg3LjI3NzY3NzMsMTA0LjcxMDc2OCBMODYuNzQ4MzYwMiwxMDQuNzExNTU5IEw4Ni43NDgzNjAyLDEwNC43MTE1NTkgTDg1Ljg3MTA1OTgsMTA0LjcxNDIyOCBMODUuODcxMDU5OCwxMDQuNzE0MjI4IEw4NS4yMzA2NDI5LDEwNC43MTY5OTYgTDg1LjIzMDY0MjksMTA0LjcxNjk5NiBMODQuMTg2NjkyOCwxMDQuNzIyNjMxIEw4NC4xODY2OTI4LDEwNC43MjI2MzEgTDgzLjQzNTE3NjEsMTA0LjcyNzM3NyBMODMuNDM1MTc2MSwxMDQuNzI3Mzc3IEw4Mi42MzkyMTk2LDEwNC43MzI5MTMgTDgyLjYzOTIxOTYsMTA0LjczMjkxMyBMODEuMzYxOTU5OSwxMDQuNzQyNzAxIEw4MS4zNjE5NTk5LDEwNC43NDI3MDEgTDc5Ljk4NDcxMDUsMTA0Ljc1NDI2OCBMNzkuOTg0NzEwNSwxMDQuNzU0MjY4IEw3OC41MDc0NzEzLDEwNC43Njc2MTQgTDc4LjUwNzQ3MTMsMTA0Ljc2NzYxNCBMNzYuMzgyMjc5MywxMDQuNzg4MTc4IEw3Ni4zODIyNzkzLDEwNC43ODgxNzggTDc0LjY3MTczMDYsMTA0LjgwNTY3NyBMNzQuNjcxNzMwNiwxMDQuODA1Njc3IEw3MS41OTg2MTY1LDEwNC44Mzg3OTYgTDcxLjU5ODYxNjUsMTA0LjgzODc5NiBMNjguMjQ3NzUzLDEwNC44NzY4NTggTDY4LjI0Nzc1MywxMDQuODc2ODU4IEw2NC42MTkxNDAxLDEwNC45MTk4NjQgTDY0LjYxOTE0MDEsMTA0LjkxOTg2NCBMNjIuMzA4NjUyNywxMDQuOTQ4MDQgTDYyLjMwODY1MjcsMTA0Ljk0ODA0IEw1OS4wNzI0NjMsMTA0Ljk4ODM3NiBMNTkuMDcyNDYzLDEwNC45ODgzNzYgTDU0Ljc3NzI1MTUsMTA1LjA0MzI0NSBMNTQuNzc3MjUxNSwxMDUuMDQzMjQ1IEw1MC4yMDQyOTA2LDEwNS4xMDMwNTggTDUwLjIwNDI5MDYsMTA1LjEwMzA1OCBMNDYuMzQ1OTQyMywxMDUuMTU0NDY3IEw0Ni4zNDU5NDIzLDEwNS4xNTQ0NjcgTDQwLjIyNTEyMDUsMTA1LjIzNzUxMiBMNDAuMjI1MTIwNSwxMDUuMjM3NTEyIEwzNS45MjIzNzMyLDEwNS4yOTY4MyBMMzUuOTIyMzczMiwxMDUuMjk2ODMgTDI3Ljk2NDgzMTIsMTA1LjQwODI0OSBMMjcuOTY0ODMxMiwxMDUuNDA4MjQ5IEwxOS40NjI5MDAzLDEwNS41MjkzNTcgTDE5LjQ2MjkwMDMsMTA1LjUyOTM1NyBMMTEuNzQyMjQxOSwxMDUuNjQwODc1IEwxMS43NDIyNDE5LDEwNS42NDA4NzUgTDcuNzMxOTI4MDUsMTA1LjY5OTMwMyBMNTYuMTk2NDM3Nyw1MC41ODcxMDMxIEw1Ni42MzU2MjgsNTAuMDg2NDg2NyBMNTYuNjM1NjI4LDUwLjA4NjQ4NjcgTDU3LjA3MzYyNjcsNDkuNTg4MzQ2MSBMNTcuMDczNjI2Nyw0OS41ODgzNDYxIEw1Ny41MTAzMzQ0LDQ5LjA5MjU1MDggTDU3LjUxMDMzNDQsNDkuMDkyNTUwOCBMNTkuNjcxMDIyOSw0Ni42NDQxOTUgTDU5LjY3MTAyMjksNDYuNjQ0MTk1IEw2MC4wOTc4OTM3LDQ2LjE1OTczNTYgTDYwLjA5Nzg5MzcsNDYuMTU5NzM1NiBMNjAuNTIyNzc2Niw0NS42NzY3MDk0IEw2MC41MjI3NzY2LDQ1LjY3NjcwOTQgTDYwLjk0NTU3MTksNDUuMTk0OTg2MiBDNjEuMDE1ODU4Myw0NS4xMTQ4MDAzIDYxLjA4NjA1MzYsNDUuMDM0NjYzMiA2MS4xNTYxNTU3LDQ0Ljk1NDU3MjQgTDYxLjU3NTYzMzIsNDQuNDc0NTU5IEM2MS42NDUzNTQyLDQ0LjM5NDY0MTggNjEuNzE0OTc3OCw0NC4zMTQ3NjU0IDYxLjc4NDUwMiw0NC4yMzQ5MjY5IEw2Mi4yMDA0Mzc2LDQzLjc1NjMzMDMgTDYyLjIwMDQzNzYsNDMuNzU2MzMwMyBMNjIuNjEzODg3NSw0My4yNzg1MTUzIEM2Ny40MjI1ODI0LDM3LjcwODA1OTUgNzEuNzAzNDUzMSwzMi4yNzA1NzE5IDc0Ljc0NTA5MjcsMjYuMDM0ODA4OSBDNzguMTIxNDAyOCwxNi40OTg4MTE3IDc0LjY4NDMxNDEsOS4zODMwNTQ5MiA3MS4xNzU3NjkyLDUuMDcxNTE1ODkgQzcwLjkwNDg3NTMsNC43Mzg2MjMwNSA3MC42MzM1NTU1LDQuNDIyNDQ3MTMgNzAuMzY0OTEyOCw0LjEyMzE2NDg0IEM2OS4xNjg4Njc4LDIuNTkyMTQ0OTIgNjkuOTgzMjIyMSwwLjA0MTM4OTM1OTQgNzIuMjYwODcyNywwLjA0MTM4OTM1OTQgQzcyLjQ0NjQ2MTgsMC4wNDEzODkzNTk0IDcyLjYzNTgyMTcsMC4wMzg1MjEwMjQ3IDcyLjgyODkzNDgsMC4wMzQ4MjA4NTg2IEw3My4yNjk3NjQ5LDAuMDI1OTUwOTE5NSBDNzMuMzY5MTMxMiwwLjAyNDA0OTcyOTUgNzMuNDY5NDMyNCwwLjAyMjMyMjQyNjEgNzMuNTcwNjY2NCwwLjAyMTAyMzU3MjEgTDczLjk5MTIwMjMsMC4wMTU5ODU1MzYzIEw3My45OTEyMDIzLDAuMDE1OTg1NTM2MyBMNzQuNDIyMDY5OSwwLjAxMTU1NjcxNjMgTDc0LjQyMjA2OTksMC4wMTE1NTY3MTYzIEw3NC43MTUwMTQsMC4wMDg5NjI5Mjc1OSBMNzQuNzE1MDE0LDAuMDA4OTYyOTI3NTkgTDc1LjQ2NzE0MzYsMC4wMDM4MjI5NDE2OSBMNzUuNDY3MTQzNiwwLjAwMzgyMjk0MTY5IEw3Ni4wODg5OCwwLjAwMTE5NDM2MDg1IEw3Ni4wODg5OCwwLjAwMTE5NDM2MDg1IEw3Ni41NjY5NzM0LDcuMTA1NDI3MzZlLTE1IEw3Ni41NjY5NzM0LDcuMTA1NDI3MzZlLTE1IFoiIGlkPSJwYXRoLTIiPjwvcGF0aD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjgxLjQ2ODIyNTMlIiB5MT0iNTcuMTg4NDQ2OCUiIHgyPSItOC4yMzU5NTEyMyUiIHkyPSI3OS4xMjM3NjA3JSIgaWQ9ImxpbmVhckdyYWRpZW50LTMiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZGRkZGIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0Q2RjA1NiIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8cGF0aCBkPSJNNTYuMTk2NDM3Nyw1MC41ODcxMDMxIEMzNS4yMjA0MDM4LDc0LjE5MjI3MTYgMTAuMjU1NDg1NywxMDIuOTEyNzUzIDAuNzc5MTc4ODg2LDExMy43MDE0MzUgQy0xLjA0NjMxODgsMTE1Ljc3OTc0NyAwLjcyMzAwOTczMSwxMTcuNzQyMjk0IDIuMTM3MDY3MjcsMTE3Ljk4NTM5OCBDNzIuODM2NDEwOCwxMzAuMTQwMDI4IDk1LjI4Mzg5NDYsOTYuODIzMDgwOSAxMDAuMjg0MDc3LDgxLjU5Mjg5MDEgQzEwNy4xMjUyOTYsNjAuNzU1MDM2NSA5Ny40NTkwMDA4LDUwLjU4NzEwMzEgOTEuOTg4NTU2Niw0Ny4yNzEzMTMzIEM3My40Mzg1OTU4LDM2LjAyNzY2MTQgNTkuNjc1MzY2Niw0Ni42NzIxMjU2IDU2LjE5NjQzNzcsNTAuNTg3MTAzMSBaIiBpZD0icGF0aC00Ij48L3BhdGg+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0i5o6n5Lu2IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ibG9nbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcuOTMzMTU0LCAzMC4xMzUyNzkpIj4KICAgICAgICAgICAgPGcgaWQ9Iui3r+W+hCI+CiAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiMzMUNDNzkiIHhsaW5rOmhyZWY9IiNwYXRoLTIiPjwvdXNlPgogICAgICAgICAgICAgICAgPHVzZSBmaWxsLW9wYWNpdHk9IjAuNjAwMDAwMDI0IiBmaWxsPSJ1cmwoI3JhZGlhbEdyYWRpZW50LTEpIiB4bGluazpocmVmPSIjcGF0aC0yIj48L3VzZT4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8ZyBpZD0iRmlsbC0xMi1Db3B5Ij4KICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iIzkzRTY1QyIgeGxpbms6aHJlZj0iI3BhdGgtNCI+PC91c2U+CiAgICAgICAgICAgICAgICA8dXNlIGZpbGwtb3BhY2l0eT0iMC43NSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0zKSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBvdmVybGF5OyIgeGxpbms6aHJlZj0iI3BhdGgtNCI+PC91c2U+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==
2.4 页面不同時期的加载截图
选择 Capture Screenshots 获得页面加载的截图。
3、开发者工具里 Source
打开 Chrome 开发者工具，然后使用快捷键 Ctrl + P 打开文件：
3.1 快速切换文件
比如我们打开上面的 normalize.css 文件
3.2 在源代码中搜索
按住 Ctrl + Shift + f 进行搜索，这里不要把光标聚焦到源文件里面，不然出不来。
比：如搜索 mark 字段
3.3 源代码里跳转行数
按 ctrl + g，输入行数跳转
比如在上面的文件里跳转到第 5 行
3.4 通过 workspaces 实现编辑器功能
选择 Add folder to workspace，或者只是把整个工程文件夹拖放入Developer Tool，然后同意。就可以在开发者工具里编辑文件保存了。
3.5 添加条件断点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script> const blogs = [ { name: "kaimo666", value: 666, }, { name: "kaimo777", value: 777, }, { name: "kaimo888", value: 888, }, ]; blogs.forEach((v) => { console.log(v.name, v.value); }); </script> </body> </html>
我们在 27 行打个断点，重新执行这段代码的时候，会停三下
我们在 27 行，右击选着编辑断点
输入条件： v.name === "kaimo888"，然后失焦就行
重新执行这段代码的时候，只有满足条件的才会停
