在开发者工具中隐藏文件?

Posted

技术标签:

【中文标题】在开发者工具中隐藏文件?【英文标题】:Hide files in developer tools? 【发布时间】:2019-01-18 19:23:40 【问题描述】:

所以,我想提前道歉,但我一直在谷歌搜索并且堆栈溢出来寻找这个问题的答案,我只是找不到一个令人满意的答案。

我知道 Facebook 使用 React,虽然我不知道他们使用什么软件架构(MVC、客户端-服务器等),但我在开发工具源选项卡上看不到任何反应文件或反应组件任何浏览器。

我将在我自己的 react 应用程序中使用 create-react-app 向您展示一个示例,该示例会显示我的所有文件:

Create-react-apps 开发工具来源:

但是,当我访问 Facebook 的页面时,我没有看到类似的内容。我看到了这个:

Facebook 的开发工具来源:

这不仅适用于 React 应用程序,也适用于我制作的节点应用程序。现在,我想知道所有这些信息在 facebook 页面上的位置......组件在哪里?为什么我看不到他们?正在运行的所有 post 和 get 请求在哪里?如何在代码中放置断点进行调试?我的意思是,除了元素选项卡之外,我什至看不到 html 页面!而且,最重要的是,我如何做同样的事情来隐藏我的文件?

似乎它增加了额外的安全层,我认为这在所有公共网站上都是可取的。再次提前感谢您,据我所知,这个问题的答案远非显而易见。

【问题讨论】:

删除你的.map文件 【参考方案1】:

我承认,当您是 Web 开发的新手时,这有点令人困惑。

可以通过 devtool 查看您的文件(源代码),因为您还上传了您的 .map 文件,这有助于将您的捆绑/缩小代码映射到原始可读的代码中。

但是,这在开发环境中非常有用,但在生产环境中却非常危险。您需要做的只是删除 .map 文件,正如评论所建议的那样。

【讨论】:

谢谢。我现在明白我必须做什么,但问题是,我的目录中没有看到任何 .map 文件。这是为什么呢? 你确定吗?也尝试搜索子目录,我尝试打开您的网络,我的浏览器检测到地图文件main.1795cc73.js.map

以上是关于在开发者工具中隐藏文件?的主要内容,如果未能解决你的问题,请参考以下文章

开发工具用起来,轻松解锁Word更多隐藏技能!

如何在 chrome 开发工具中隐藏 html 注释?

login.do提交时如何使表单密码数据隐藏在Chrome开发者工具网络面板中?

干货 | 解锁Chrome开发工具的隐藏功能

隐藏来自浏览器开发者工具网络的 Angular API 调用

在 chrome 开发工具中隐藏 401 console.error 在 fetch() 调用中得到 401 [重复]