- 在Chrome设置→“高级”→打开“自动翻译语言”开关→访问外文页面时右键点击文本→选择“检查”→查看div或span标签是否被添加翻译属性(如`class="translated-text"`)。
- 对比原页面源码:打开未翻译的网页→按`Ctrl+U`查看HTML→与翻译后的代码对比(如图片链接、按钮位置是否偏移)。
2. 通过开发者工具观察DOM变化
- 按`Ctrl+Shift+I`打开开发者工具→切换到“Elements”面板→刷新页面并触发翻译→观察新增节点(如script src="translate.js")是否插入到head或body中。
- 测试交互功能:点击翻译后的链接或按钮→查看控制台是否报错(如`Uncaught TypeError`)→判断JavaScript事件是否被覆盖。
3. 验证CSS样式冲突
- 在翻译页面按`Ctrl+Shift+P`→输入“Styles”→强制显示元素样式→检查是否有额外添加的CSS规则(如`display: inline-block;`)导致布局错乱。
- 手动调整样式:在“Styles”面板修改`font-size`或`margin`→确认能否正常覆盖翻译引擎的默认设置(避免字体过大或过小)。
4. 关闭翻译恢复页面结构
- 在页面右下角点击“翻译关闭”按钮→刷新页面→对比关闭前后的布局和功能(如表单提交、视频播放是否正常)。
- 清除缓存数据:按`Ctrl+Shift+Del`删除浏览记录→重新加载页面→确保问题由翻译引起而非浏览器缓存。
5. 使用无痕模式测试翻译影响
- 按`Ctrl+Shift+N`打开无痕窗口→启用自动翻译→访问相同外文页面→观察结构是否与普通模式一致(排除插件或历史配置干扰)。