window 系统里 chrome 浏览器一些实用的调试技巧_windows怎么选在控制台fetch

说明

某一天，我突然发现 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==
1

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

我们在 27 行打个断点，重新执行这段代码的时候，会停三下

我们在 27 行，右击选着编辑断点

输入条件： v.name === "kaimo888"，然后失焦就行

重新执行这段代码的时候，只有满足条件的才会停

4、开发者工具里 Console

4.1 复制控制台的变量

复制函数不是由 ECMAScript 定义的，而是由 Chrome 提供的。

copy(location)
1

4.2 用表格的形式输出对象数组

Chrome 提供了一个表格函数 table，可以将对象数组制成表格。

let kaimoArr = [
	{
		name: "kaimo666",
		value: 666
	},{
		name: "kaimo777",
		value: 777
	},{
		name: "kaimo888",
		value: 888
	},
];
table(kaimoArr)
1
2
3
4
5
6
7
8
9
10
11
12
13

4.3 控制台里 $ 相关的简写命令

需要注意的是：这个 $ 跟 jQuery 的不是一回事，如果页面有引入 jQuery，那么这个 $ 就表示 jQuery。

• $()：document.querySelector() 的简写，返回第一个和css选择器匹配的元素。
• $$()：document.querySelectorAll() 的简写，返回一个和css选择器匹配的元素数组。
• $0-$4：依次返回五个最近你在元素面板选择过的DOM元素的历史记录，$0 是最新的记录，以此类推。
• $_：引用上一次操作的结果，不用每次都复制一遍

'kaimo'.split('')
$_
1
2

5、开发者工具里 Elements

5.1 切换样式颜色格式

比如：下面的颜色显示格式是 rgb 的，我们可以按住 shift 点击颜色块进行切换。

切换之后

CSS颜色设置（6种方法）：

5.2 存储 DOM 元素到全局临时变量中

比如我要存储 ReactApp 这个 dom 元素，我们可以右键这个元素，找到最下那个 Store as global variable。

选择之后就会出现一个变量，供你使用，比如这里的 temp1 就是该 dom 元素：

5.3 一键展开 DOM 下面的所有元素

我们普通展开时只会展开它的子节点，如果我们想全部展开，可以按住 alt 在点击展开即可。

全部展开效果：

拓展阅读

• chrome devtools：commandline-api
• 12个最好用的Chrome浏览器调试技巧
• Chrome开发者工具的11个使用技巧
• 11+ chrome高级调试技巧，学会效率直接提升666%
• 【译】像高级前端开发人员一样使用Chrome DevTools
• 【译】15个必须知道的chrome开发者技巧