Chrome检查时Rails出现ActionController::RoutingError问题求助

问题现象 #

仅在Chrome浏览器开启开发者工具（检查）时，Rails应用日志出现如下路由错误，其他浏览器或不开启开发者工具时无此报错：

ActionController::RoutingError (No route matches [GET] "/assets/bootstrap-datetimepicker-standalone.min.css.map"):
actionpack (5.1.7) lib/action_dispatch/middleware/debug_exceptions.rb:63:in `call'
web-console (3.5.1) lib/web_console/middleware.rb:135:in `call_app'
web-console (3.5.1) lib/web_console/middleware.rb:28:in `block in call'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `catch'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `call'
actionpack (5.1.7) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
railties (5.1.7) lib/rails/rack/logger.rb:36:in `call_app'
railties (5.1.7) lib/rails/rack/logger.rb:24:in `block in call'
activesupport (5.1.7) lib/active_support/tagged_logging.rb:69:in `block in tagged'
activesupport (5.1.7) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (5.1.7) lib/active_support/tagged_logging.rb:69:in `tagged'
railties (5.1.7) lib/rails/rack/logger.rb:24:in `call'
sprockets-rails (3.2.2) lib/sprockets/rails/quiet_assets.rb:11:in `block in call'
activesupport (5.1.7) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.1.7) lib/active_support/logger.rb:63:in `block (3 levels) in broadcast'
activesupport (5.1.7) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.1.7) lib/active_support/logger.rb:61:in `block (2 levels) in broadcast'
sprockets-rails (3.2.2) lib/sprockets/rails/quiet_assets.rb:11:in `call'
actionpack (5.1.7) lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
actionpack (5.1.7) lib/action_dispatch/middleware/request_id.rb:25:in `call'
rack (2.2.3) lib/rack/method_override.rb:24:in `call'
rack (2.2.3) lib/rack/runtime.rb:22:in `call'
activesupport (5.1.7) lib/active_support/cache/strategy/local_cache_middleware.rb:27:in `call'
actionpack (5.1.7) lib/action_dispatch/middleware/executor.rb:12:in `call'
actionpack (5.1.7) lib/action_dispatch/middleware/static.rb:125:in `call'
rack (2.2.3) lib/rack/sendfile.rb:110:in `call'
rack-mini-profiler (2.3.2) lib/mini_profiler/profiler.rb:237:in `call'
rack-cors (1.0.1) lib/rack/cors.rb:93:in `call'
railties (5.1.7) lib/rails/engine.rb:522:in `call'
puma (3.11.0) lib/puma/configuration.rb:225:in `call'
puma (3.11.0) lib/puma/server.rb:624:in `handle_request'
puma (3.11.0) lib/puma/server.rb:438:in `process_client'
puma (3.11.0) lib/puma/server.rb:302:in `block in run'
puma (3.11.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread'

原因分析 #

.css.map是CSS源码映射文件，仅当浏览器开启开发者工具且启用了「CSS源码映射」功能时，才会自动请求该文件——用于将压缩后的CSS代码映射回原始未压缩的源码，方便调试。报错的核心是Rails资产管道（Sprockets）找不到这个map文件，因此返回路由错误。

解决方法 #

方案1：添加缺失的源码映射文件（保留调试功能） #

如果需要保留CSS源码映射功能，确保对应的.map文件存在并被资产管道识别：

• 若通过gem引入bootstrap-datetimepicker：检查gem的assets/stylesheets目录是否包含bootstrap-datetimepicker-standalone.min.css.map，如果没有，可手动下载对应版本的map文件，放到Rails项目的app/assets/stylesheets或vendor/assets/stylesheets目录下。
• 若通过yarn/npm管理前端资源：确认安装的包包含该map文件，确保在application.css中正确引入CSS文件，资产管道会自动处理关联的map文件。
• 开发环境下，可在config/initializers/assets.rb中添加如下配置，让资产管道预编译该map文件：

  Rails.application.config.assets.precompile += %w( bootstrap-datetimepicker-standalone.min.css.map )
  

方案2：禁用浏览器对该map文件的请求（永久解决） #

如果不需要源码映射功能，直接阻止浏览器请求该文件：
找到项目中引用bootstrap-datetimepicker-standalone.min.css的位置，打开该CSS文件，删除末尾的注释行：/*# sourceMappingURL=bootstrap-datetimepicker-standalone.min.css.map */，保存后浏览器就不会再请求这个map文件。

方案3：客户端关闭源码映射（临时调试用） #

仅在本地调试时生效：打开Chrome开发者工具的设置（右上角齿轮图标），进入Preferences -> Sources，取消勾选「Enable CSS source maps」选项，浏览器将不再请求任何CSS map文件。

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