前言介绍：网站上线前的自检是避免线上事故的最后一道防线。很多新手站长或运营人员在上传文件后，经常遇到图片裂开、链接点不动、样式错乱等问题，严重影响用户体验和搜索引擎收录。本教程将带你从头到尾、逐项排查网站的关键元素，确保链接、图片、兼容性全部达标。这套自检方法适用于任何类型的网站，包括企业站、电商站、博客、单页应用等。按照以下步骤操作，你可以在30分钟内完成一次完整的线上预检。
前置准备：
1. 一台可以正常访问互联网的电脑，建议使用Chrome浏览器（最新版），同时准备好Firefox和Edge浏览器用于兼容性测试。
2. 网站的FTP或后台文件管理权限，以及域名解析已生效（确保网站可以通过公网域名访问）。
3. 准备一份网站地图或站点结构清单，包含所有页面URL（首页、分类页、详情页、关于我们、联系页等）。
4. 下载并安装一个截图工具（如Snipaste或系统自带截图），用于记录问题。
5. 打开浏览器的开发者工具（F12键），熟悉“控制台”（Console）和“网络”（Network）面板的基本用法。
分步操作步骤：
步骤1：全站链接有效性自检（死链与错误跳转）
1. 打开Chrome浏览器，访问你的网站首页。右键点击页面空白处，选择“检查”或按F12打开开发者工具。
2. 切换到“控制台”（Console）标签页，清除现有日志（点击左上角的清除按钮或按Ctrl+L）。
3. 在控制台中输入以下JavaScript代码并回车：document.querySelectorAll('a').forEach(a => { if (!a.href || a.href === '#' || a.href.startsWith('javascript:')) console.warn('可疑链接:', a.innerText, a.href); }); 这段代码会高亮显示所有空链接、锚点链接或JS伪链接。
4. 手动点击首页上的每一个导航菜单项、按钮、图片链接、底部链接。每点击一个，观察页面是否正常跳转，以及浏览器地址栏的URL是否正确（不要出现localhost或临时域名）。如果页面跳转后出现404错误，记录下该链接的完整URL。
5. 对于站内所有链接，使用在线死链检测工具（如Broken Link Checker或W3C Link Checker），输入你的网站域名，让工具自动爬取所有页面并报告死链。如果工具无法使用，可以手动打开“关于我们”、“产品列表”、“新闻详情”等核心页面，逐一点击其中的链接。
6. 检查所有外部链接（友情链接、引用来源、社交图标）是否在新窗口打开（target="_blank"），并且链接地址正确。特别注意“https://”是否遗漏，或者http与https混用导致混合内容警告。
步骤2：图片与多媒体文件完整性自检
1. 在首页上，按F12打开开发者工具，切换到“网络”（Network）标签页，勾选“禁用缓存”（Disable cache）选项，然后刷新页面（F5）。
2. 在网络面板的过滤器中输入“img”，只显示图片请求。观察每个图片的状态码：200表示成功，404表示图片缺失，403表示权限问题，301/302表示重定向（需确认是否正常）。
3. 如果发现状态码404的图片，右键点击该请求，选择“在新标签页中打开链接”，确认文件是否真的不存在。常见的缺失原因：图片文件名大小写错误、路径中多了或少了一个斜杠、使用了中文文件名导致URL编码问题。
4. 检查图片的alt属性：在控制台中输入 document.querySelectorAll('img:not([alt])').forEach(img => console.warn('缺少alt的图片:', img.src)); 找出所有没有alt描述的图片，这些图片会影响SEO和屏幕阅读器用户。
5. 对于产品详情页、文章正文中的图片，手动滚动页面，确保所有懒加载图片都能正常显示。如果图片显示为占位符或灰色方块，说明懒加载脚本可能未触发或图片链接失效。
6. 检查视频或音频文件：点击播放按钮，确认视频能正常加载、音频能播放。特别注意视频文件格式是否被浏览器支持（推荐MP4/H.264编码，音频推荐MP3或AAC）。
步骤3：跨浏览器与设备兼容性自检
1. 在Chrome浏览器中完成基本测试后，打开Firefox浏览器，访问网站首页和至少两个内页（如产品页和联系页）。观察布局是否错位、文字是否重叠、按钮是否变形。特别注意CSS Flexbox和Grid布局在Firefox中的表现可能与Chrome有细微差异。
2. 打开Edge浏览器（基于Chromium内核，但仍有差异），重复上述操作。重点检查字体渲染、圆角边框、阴影效果是否一致。
3. 使用浏览器的响应式设计模式：在Chrome中按F12，点击左上角的“切换设备工具栏”图标（手机+平板图标）。从设备列表中选择“iPhone 12 Pro”或“iPad”，刷新页面。检查以下内容：导航菜单是否折叠为汉堡菜单、图片是否自适应宽度、表格是否出现横向滚动条、按钮是否可点击（不会被其他元素遮挡）。
4. 手动调整视口宽度：拖动响应式模式右侧的宽度滑块，从320px（小屏手机）逐渐拉大到1920px（大屏显示器）。观察页面在每一个宽度断点下的表现，特别注意文字是否溢出、侧边栏是否消失、底部版权信息是否被截断。
5. 在真实手机或平板上测试：使用同一WiFi网络，在手机浏览器中输入网站域名。检查触摸交互：点击、滑动、缩放是否流畅，表单输入框是否能自动弹出正确键盘（如数字键盘用于电话输入）。
步骤4：功能与交互逻辑自检
1. 测试表单提交：找到联系页、注册页或搜索框。输入测试数据（如姓名、邮箱、留言），点击提交按钮。观察是否有成功提示或错误提示。如果表单提交后页面只是刷新但没有反馈，说明后端处理或前端验证存在问题。
2. 检查搜索功能：在搜索框输入一个已知存在的关键词（如产品名称），确认搜索结果页面能正确展示。再输入一个不存在的内容，确认是否有“无结果”提示，而不是直接跳转404或空白页。
3. 测试轮播图或滑动组件：手动点击左右箭头或指示点，观察切换是否平滑，图片是否预加载。如果轮播图自动播放，等待5秒确认切换间隔是否正常，是否有卡顿。
4. 验证用户登录/注册流程（如果网站有会员系统）：注册一个新账号，检查邮箱验证邮件是否能收到（注意垃圾邮件箱）。登录后，确认个人中心页面能显示正确的用户信息，退出登录后页面状态重置。
5. 测试所有弹窗（如客服对话框、优惠券弹窗、Cookie同意弹窗）：确认弹窗能正常打开和关闭，关闭后不会在每次页面刷新时重复弹出（除非设置了合理的时间间隔）。检查弹窗在移动端是否被正确缩放，关闭按钮是否容易点击。
步骤5：加载速度与性能自检
1. 打开Chrome开发者工具，切换到“Lighthouse”标签页（如果找不到，可以安装Lighthouse扩展）。选择“移动端”（Mobile）模式，点击“生成报告”（Generate report）。等待几分钟，Lighthouse会生成一份性能报告。
2. 重点关注“First Contentful Paint”（首次内容绘制）和“Largest Contentful Paint”（最大内容绘制）的得分。如果得分低于50，说明页面加载过慢。常见优化点：图片未压缩、JS/CSS文件未合并或未压缩、服务器响应慢。
3. 在“网络”面板中查看页面加载的总请求数和总大小。一般来说，一个普通企业站的总请求数应控制在50个以内，总大小不超过3MB。如果发现单个图片超过500KB，建议使用图片压缩工具（如TinyPNG）重新压缩后上传。
4. 检查是否启用了浏览器缓存：在“网络”面板中点击一个静态资源（如CSS文件），查看响应头中的“Cache-Control”或“Expires”字段。如果看到“max-age=0”或“no-cache”，说明缓存策略未生效，需要联系后端或运维配置静态资源缓存。
5. 使用GTmetrix或PageSpeed Insights（在线工具）输入你的域名，获取更详细的性能优化建议。重点关注“启用压缩”、“利用浏览器缓存”、“优化图片”这三项建议。
步骤6：SEO基础元素自检
1. 查看页面标题（Title）：在浏览器标签页上悬停，确认标题文字是否准确描述了页面内容。每个页面应有独立的标题，不要所有页面都用同一个标题。在页面右键“查看网页源代码”，搜索“