按`Ctrl+Shift+I`(或`F12`)直接调出开发者工具面板。若未显示“Console”标签,点击右上角齿轮图标→勾选“Show console panel”。此操作会默认加载当前网页的HTML、CSS和JavaScript代码。
步骤二:修改设置强制启用详细日志
访问`chrome://settings/`→“隐私与安全”→“网站设置”→点击“内容”→将“JavaScript”权限设置为“允许(推荐)”。返回开发者工具→“Console”标签页→右键点击→选择“Preserve log upon navigation”以保留多页面调试记录。
步骤三:通过命令行参数增强调试能力
在Chrome快捷方式属性中添加以下参数:
bash
--auto-open-devtools-for-tabs --enable-logging
此设置会在新标签页自动打开开发者工具,并在控制台显示完整日志(如网络请求时间戳)。若需调试移动端页面,按`Ctrl+Shift+M`切换设备模式后刷新页面。
步骤四:使用断点功能定位代码问题
在开发者工具“Sources”标签页→展开`main.js`文件→点击行号添加断点。当执行到该代码时,页面会暂停并高亮当前语句。对于异步请求,在“Network”标签页筛选XHR请求→右键点击→选择“Block request”阻止特定接口调用。
步骤五:清除缓存确保调试环境准确
若修改代码后无变化,按`Ctrl+F5`强制刷新页面。对于持久缓存(如Service Worker),访问`chrome://serviceworker-internals/`→点击“Delete all”清除缓存。企业内网环境需检查代理服务器是否拦截了`*.googlesyndication.com`的脚本加载。