网站重制焦点乱跳，Polypane Outline标签咋排查？

搞个人网站HD重制时碰上焦点顺序bug，键盘导航乱成一锅粥。翻出Polypane浏览器里的Outline标签页，这玩意儿能显示页面的标题、地标、链接、焦点顺序等轮廓。尤其焦点顺序叠加视图用数字标记跳转路径，bug瞬间现形。下面就是拿这个功能抓虫的实操过程，顺带说说其他好用的检查选项。

捉虫神器Polypane

Polypane这浏览器跟Chrome、Safari不一样，它生来就是帮开发搞事情的。打开一个网站，它能同时展示手机、平板、电脑好几个尺寸的界面，不用来回切设备。2023年那会儿就在个人博客吹过它，每次打开都有新惊喜，到了2024年8月还是这德性——藏着一堆没人发现的好货。侧边栏里有一排标签页，什么Meta啊、Outline啊，其中Outline标签页看着不起眼，实际是个深度扫描仪。

Outline标签有啥

点开Outline标签，能看到六个子选项：标题（Headings）、地标（Landmarks）、链接（Links）、图片（Images）、焦点顺序（Focus order）、还有完整的无障碍树（Accessibility tree）。每个选项点一下，页面上就会划出对应的轮廓线。比如选“标题”，所有H1到H6的层级关系一目了然，H1外面套个框，H2缩进一层，哪个页面漏了主标题瞬间暴露。选“链接”，所有带href的标签都被框起来，连那些隐藏的导航链接也无处藏身。这些轮廓就像给页面拍X光片，骨骼错位一眼就能看出来。

焦点顺序bug咋查

这次重制网站碰到一个鬼问题：按Tab键跳转时，本该先跑到搜索框，结果直接飞到右下角的“返回顶部”按钮。用键盘导航的人估计要骂街。打开Polypane的Outline标签页，选中“Focus order”，页面上没反应？别急，右上角有个“Show issues”复选框，勾上它。这时候有问题的元素会标红，但光看红色还不够，得知道具体跳转顺序。

往下看，有一个“Overlay”按钮，点一下。页面直接盖上一层半透明蒙版，每个可聚焦元素头顶冒出一个数字标签——1、2、3、4……跟外卖骑手的配送路线图似的。按Tab键试试，数字会跟着高亮移动。这下看清楚了：数字1是搜索框（正确），数字2却是一个隐藏的“侧边栏展开按钮”（display:none但居然能聚焦），数字3才是正常的导航链接。破案了，那个隐藏按钮用了负数的tabindex还是什么骚操作。

解决步骤：切回代码编辑器，找到那个侧边栏按钮的HTML。给加上tabindex="-1"或者直接塞一个inert属性。保存刷新，Polypane里重新打开Overlay，数字2消失了，焦点顺序变成1→3→4，完美。顺带说一句，如果Overlay没显示，检查一下页面是不是iframe嵌入的，Polypane对跨域iframe的焦点追踪有限制。另外，动态加载的内容（比如无限滚动列表）需要先触发加载完成，再刷新Outline视图——点一下Outline标签页旁边的刷新图标即可。

拿个实际例子打个比方：焦点顺序就像奶茶店叫号，店员喊“001号”结果002号跑上去，后面全乱套。Polypane这个Overlay等于给每个号牌发一个发光数字，插队的人当场抓现行。写代码的时候经常遇到a标签套button，或者div冒充按钮加了tabindex="0"，这些都能在Overlay视图里看到数字标记。甚至能模拟键盘侠的操作：打开Overlay后，闭着眼睛按Tab，看数字高亮是否按照123456的顺序走，不是的话哪里断开哪里补。

其他检查选项

Outline标签页里还有个“Landmarks”视图，勾上“Show potentials”之后，那些没用ARIA角色标记的div块会被标成“可能的地标”。比如一个div class="sidebar"，系统会提示“这玩意是不是该写成aside？” 这种提示对搞SEO和无障碍特别友好。另外“Show issues”在不同视图下的表现不一样：在Images视图里，缺alt属性的图片会直接标红，连图片文件名都列出来。在Links视图里，空链接（href="#"）或者没文字的链接会被高亮。

整这些花活的时候注意，Polypane的Outline依赖DOM树解析，如果页面用了大量JavaScript动态生成内容，得等渲染稳定后再刷新视图。有个小技巧：按F12打开开发者工具，切到Elements面板随便改个类名再删掉，触发的重绘会让Outline重新计算。还有，移动端模拟器里的焦点顺序跟真实手机可能有差异，最好拿真机再验证一遍。不过对于日常开发调试，这玩意儿已经够用了——尤其是碰上那种第三方插件乱塞聚焦元素的情况，Overlay一开，谁在搞鬼清清楚楚。