如何模拟含分页符的网页打印样式并启用完整调试功能？

方法一：Chrome DevTools + 自定义CSS可视化分页符 #

1. 打开Chrome开发者工具（快捷键F12或Ctrl+Shift+I）。
2. 点击右上角三点按钮 → 更多工具 → 渲染，打开渲染面板。
3. 在「模拟CSS媒体类型」下拉菜单中选择print，页面将切换为打印样式。
4. 打开控制台（Console标签），粘贴以下代码并回车，手动标记分页位置：

   @media print {
     * {
       page-break-inside: avoid !important;
     }
     /* 用红色虚线模拟分页符 */
     body::before, .page-break::before {
       content: '';
       display: block;
       border-top: 2px dashed red;
       margin: 10px 0;
       width: 100%;
     }
     /* 显示页码辅助定位 */
     @page {
       @top-center {
         content: '第 ' counter(page) ' 页';
       }
     }
   }
   

5. 此时页面会显示模拟分页符，你可以正常使用元素检查器调试样式，修改CSS后分页效果会实时更新。

方法二：Firefox开发者工具（原生支持分页预览） #

Firefox的响应式设计模式原生支持显示打印分页符，且检查器功能完整：

1. 打开Firefox开发者工具（F12或Ctrl+Shift+I）。
2. 点击响应式设计模式按钮（屏幕图标），或按Ctrl+Shift+M。
3. 在顶部设备选择栏中，点击「更多设备类型」→ 选择打印。
4. 页面将自动加载打印样式并显示分页符，直接用检查器选中元素即可调试，样式修改会同步更新分页效果。

补充说明 #

• 两种方法都能保留完整的开发者工具功能，方便调试page-break-before、page-break-after、page-break-inside等打印相关CSS属性。
• 若需精准模拟纸张尺寸，可在Chrome渲染面板的「模拟纸张尺寸」、Firefox响应式模式的纸张选项中设置对应参数。

内容的提问来源于stack exchange，提问作者Yong