为什么 Chrome devtools 以橙色和斜体显示这些文件夹？

【问题标题】：Why does Chrome devtools show these folders in orange and in italics?为什么 Chrome devtools 以橙色和斜体显示这些文件夹？
【发布时间】：2017-04-25 01:12:23
【问题描述】：

我正在查看 Chrome 开发者工具中的“来源”标签。一些文件夹是橙色和斜体。这些与“常规”文件夹（以蓝色显示）有何不同？

【问题讨论】：

  • 您必须拥有source-mapped 这些文件夹。如果您的捆绑器/编译器保留源映射，也可能自动发生。
  • 扩展 wOxxOm 的答案——这意味着文件实际上并没有被浏览器直接加载/解释——相反，有一些样式表是由这些来源“编译”的，并且通过sourcemaps 的魔力源文件可供您在开发工具中查看 - 但是，如果开发工具关闭，它们将不会被加载。
  • 见Introduction to JavaScript Source Maps

标签： google-chrome google-chrome-devtools


【解决方案1】：

文件夹颜色

  • 蓝色 - 常规文件夹，不包含任何源地图文件
  • 橙色 - 文件夹包含附加了源映射的文件（.less/.css 或 .ts/.js)

资源颜色

  • 黄色 - JS
  • 紫罗兰色 - CSS 和字体
  • 绿色 - 图片
  • 灰色 - HTML

【讨论】：

  • 谢谢。你能提供一个链接到这些偶然记录的地方吗？
  • 从技术上讲，橙色文件夹包含蓝色文件夹中包含源映射的文件的原始视图。
【解决方案2】：

字体似乎是绿色的。至少 .woff2

【讨论】：

    猜你喜欢
    • 2021-09-16
    • 2019-04-27
    • 2020-04-17
    • 2021-05-04
    • 2014-11-18
    • 2015-04-20
    • 1970-01-01
    • 2019-05-07
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode