Chrome更新后Symfony异常页面CSS显示异常问题咨询

这是Chrome 118及后续版本调整内置用户代理默认样式，与Symfony内置异常页原有CSS规则冲突导致的，完全可以通过自定义CSS注入类扩展修复，不需要改动项目代码：

• 推荐使用Stylus扩展（注意不要选老旧的Stylish，该版本存在违规收集用户数据的隐私问题），这是轻量的站点自定义CSS注入工具，可直接从Chrome官方应用商店安装。
• 具体操作流程：
  1. 安装完成后打开显示异常的Symfony错误页面，点击浏览器扩展栏的Stylus图标，选择「为当前地址编写样式」
  2. 将以下修复规则粘贴到样式编辑区，保存后刷新页面即可恢复正常布局：

/* 适配Chrome新版样式，修复Symfony异常页排版错乱 */
.sf-exceptionreset pre {
    white-space: pre-wrap !important;
    margin: 0 !important;
    padding: 6px 0 !important;
}
.sf-exceptionreset .trace-stack {
    overflow-x: auto !important;
}
.sf-exceptionreset .exception-message-wrapper .exception-message {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

• 仅临时查看页面不想装扩展的话，可以直接打开Chrome开发者工具，在Sources面板的临时样式表中添加上述规则，该方式仅当前会话生效，刷新页面后规则会失效。

补充：针对本地维护的开发项目，更一劳永逸的方案是将项目依赖的symfony/error-handler组件升级到最新版本，Symfony官方早已针对Chrome的本次样式调整推送了兼容补丁，升级后不需要额外注入样式。

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