window系统里chrome浏览器一些实用的调试技巧(代码片段)

关键词：

说明

某一天，我突然发现 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"，然后失焦就行

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

4、开发者工具里 Console

4.1 复制控制台的变量

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

copy(location)

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

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

let kaimoArr = [
	
		name: "kaimo666",
		value: 666
	,
		name: "kaimo777",
		value: 777
	,
		name: "kaimo888",
		value: 888
	,
];
table(kaimoArr)

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

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

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

'kaimo'.split('')
$_

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开发者技巧

windows下使用wireshark调试chrome浏览器的http/2流量

...E变量值：%USERPROFILE%sslkeysENV.pms3.在CMD使用命令行启动chrome浏览器> 查看详情

通过chrome在windows中调试运行在iphone-safari上的页面

本文重点讨论如何在Windows系统中通过chrome浏览器调试运行在iPhoneSafari浏览器中的网页。如果你有一台iMac/MacBook，可忽略该文档。iMac环境下，直接通过USB将iphone与iMac/MacBook链接，之后在iMac/MacBook中打开Safari进入调试模式，即可对... 查看详情

研究僧丨window实用利器分享(代码片段)

...啥的。任务视图Alt+Tab切换应用程序Win+Tab切换桌面Tab+Ctrl浏览器书签切换Win+Ctrl+D创建虚拟桌面Win+Ctrl+F4关闭虚拟桌面Win+Ctrl+←/→切换虚拟桌面触控手势三指上滑：任务视图三指左右移动：切换应用程序三指同时点击：Cortana四指同... 查看详情

如何用chromedevtools调试iossafari

...置”》“开发人员选项”》“USB调试”；2、手机上Chrome浏览器设置：打开Chrome浏览器，点击左下角菜单按键，“设置”》“开发者工具”》“启用USB网页调试”三、运行AndroidSDK1、设置环境变量：右击“我的电脑”》“属性”》... 查看详情

怎么调整chrome浏览器的字体

...果是公认的目前最好的屏幕显示中文字体。参考技术A1、浏览器设置字体大小2、设置系统字体大小3、编辑字体大小本回答被提问者采纳 查看详情

postman

...统，PostmanMac、WindowsX32、WindowsX64、Linux系统，还支持postman浏览器扩展程序、postmanchrome应用程序等。Postman重要提示：由于2018年初chrome停止对chrome应用程序的支持，你的postman插件可能无法正常使用了。目前chrome应用商店能使用的... 查看详情

api调试工具--------postman

...https://www.getpostman.com/ 安装：1、Postman最早是作用chrome浏览器插件存在的，所以，你可以到chrome商店搜索下载安装，因为重所周知的原因，所以，大家都会找别人共享的postman插件文件来安装。由于2018年初Chrome停止对Chrome应用... 查看详情

前端调试的那些手段

...调试方法。主要包含在PC上的IE、FireFox、Chrome、Safari、Edge浏览器开发工具调试，远程真机安卓微信页面、安卓常见浏览器、WebView环境、iPhone微信页面、iPhone的Safari调试API测试工具Postman 查看详情

如何使用谷歌浏览器chrome更好地调试(代码片段)

💂个人网站:【海拥】【摸鱼小游戏】🤟风趣幽默的前端学习课程：👉28个案例趣学前端💅想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】💬免费且实用的计算机相关知识题库：👉... 查看详情

7款实用chrome扩展推荐：帮你提升chrome使用体验

...文地址：http://whosmall.com/?post=416本文标签：Chrome扩展Chrome浏览器Chrome使用体验Chrome技巧相信大部分使用Chrome浏览器的人都和我一样，不仅因为它简洁的界面和快速的启动速度，各种强大的扩展程序也是我离不开Chrome的一大原因。... 查看详情

7款实用chrome扩展推荐：帮你提升chrome使用体验

...文地址：http://whosmall.com/?post=416本文标签：Chrome扩展Chrome浏览器Chrome使用体验Chrome技巧相信大部分使用Chrome浏览器的人都和我一样，不仅因为它简洁的界面和快速的启动速度，各种强大的扩展程序也是我离不开Chrome的一大原因。... 查看详情

如何利用chromedevtools调试android手机上的web网站

...置”》“开发人员选项”》“USB调试”；2、手机上Chrome浏览器设置：打开Chrome浏览器，点击左下角菜单按键，“设置”》“开发者工具”》“启用USB网页调试” 三、运行AndroidSDK1、设置环境变量：右击“我的电脑”》“属性... 查看详情

在现代chrome版本上启用flash调试(代码片段)

...s–PPAPI如果您在Chrome打开时安装，系统会要求您重新启动浏览器。让我知道事情的后续。 查看详情

使用chrome远程调试设备及调试模拟器设备

...线手机系统是Android4.0+并且在手机上安装Android版本的Chrome浏览器。注意：远程调试需要电脑上的chrome浏览器版本比手机上的chrome浏览器版本新。设置Android手机在Android手机上选择& 查看详情

js压缩后的代码如何调试？

...的代码就难以识别了。对于这种代码，推荐的思路是先看浏览器中是否有报错，然后根据错误来判断自己原始代码里可能出错的位置；如果没有报错，那也是断定大概的位置，然后Chrome里打开开发者工具里的Sources，打开自己的... 查看详情

Qt：如何编写 Windows 桌面实用程序？

...可以从Windows上的任何地方调用的程序呢？假设我在网络浏览器中选择了一些文本。我希望能够通过击键调用我的程序，可能会显示一个包含我可以选择的文本文件列表的小列表（最好是光标所在的 查看详情

chromegoogle浏览器下载

...sp;下载和安装GoogleChromeGoogleChrome是一款快速且免费的网络浏览器。在下载之前，请检查Chrome是否支持您的操作系统，以及您是否满足所有其他系统要求。计算机 Android设备iPhone和iPad在Windows设备上安装Chrome下载安装文件。如果... 查看详情

mac实用技巧之：访达/finder(代码片段)

...调度中心(MissionControl)、聚焦(spotlight)，更搞笑的是，谷歌浏览器windows版，窗口就叫窗口，Mac版竟然翻译成：电动窗，没错，就是叫『电动窗』，感觉是刚学汉语的歪果仁翻译的。1.Finder显示当前文件路径2.Finder显示隐藏文件快捷... 查看详情