您可以从 chrome 开发工具检查 Web 应用程序的文件系统吗？

Question

我在一个网站上工作，该网站使用HTML5的Filesystem API将一些文件写入临时文件系统。有什么方法可以让我使用Chrome Developer工具来检查我写的文件吗？

Answer 1

如果转到chrome://flags并启用"启用开发人员工具实验"，然后转到开发人员工具设置中的"实验"选项卡，则有一个名为"文件系统检查"的选项卡可能会起作用。不过我还没试过。

Answer 2

文件系统检查不再可用
我找不到官方公告，但看起来这个文件系统API很快就会被Chrome弃用，因为它从未被W3C接受为标准，现在（2017年1月，v.55）Google Chrome是唯一使用它的web浏览器。

Answer 3

正如其他人在博客中显示的那样，搜索检查器花费了我很长时间。我使用的是v.63，它已经不存在了。

但他们是另一种使用web终端的方法。也许你可以这样做http://www.htmlfivewow.com/demos/terminal/terminal.html

Answer 4

正如其他答案所指出的，自v106（2022）起，似乎没有内置的方法来查看Chrome开发工具中的文件，这可能是因为文件系统API从未标准化。

来自MDN（2021-2022）：

标准化规范的工作早在2012年就被放弃了，但到那时，谷歌Chrome已经包含了自己的API实现。。。试图创建一个提供谷歌API功能的规范，可以达成共识。结果是文件和目录条目API。Chrome提供的API的这个子集还没有完全指定。。。

但是，由于我们在开发工具中有控制台，我们总是可以通过一些代码访问文件。以下是一些有用的功能，找到的所有文件的树对象都将打印在控制台中，只需点击几下即可深入其中。

/** Get the contents (aka. entries, children) of a directory */
function getEntries(directoryEntry) {
    if (!directoryEntry) return Promise.reject(Error('No directoryEntry param provided'));
    // The entry could be a file (FileEntry, no createReader)
    if (!directoryEntry.createReader) return Promise.resolve([]);
    const directoryReader = directoryEntry.createReader();
    return new Promise((resolve, reject) => {
        // The FileError details are not helpful, so let's expand on them
        const handleError = (error) => {
            const vfsError = new Error(
                'Failed to get entries from directory'
                + JSON.stringify(directoryEntry)
                + `due to error ${JSON.stringify(error)}`,
            );
            vfsError.details = { arguments: { directoryEntry }, error };
            reject(vfsError);
        };
        directoryReader.readEntries((entries) => resolve(entries), handleError);
    });
}
/** Get a tree object that contains a name, contents (recursive), and the original entry */
async function getEntriesTree(directoryEntry) {
    const childrenEntries = await getEntries(directoryEntry);
    const contents = {};
    for (let i = 0; i < childrenEntries.length; i += 1) {
        const entry = childrenEntries[i];
        // eslint-disable-next-line no-await-in-loop
        contents[entry.name] = await getEntriesTree(entry);
    }
    const { name } = directoryEntry;
    return { name, contents, entry: directoryEntry };
}
/** Get the file system (async) */
function getFileSystem() {
    // See https://developer.mozilla.org/en-US/docs/Web/API/Window/requestFileSystem
    const requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
    const type = window.PERSISTENT; // or window.TEMPORARY
    const size = 0; // size of zero requests as much space as possible
    return new Promise((resolve, reject) => requestFileSystem(type, size, resolve, reject));
}
// Make the tree object from the file system
(async () => {
    const fileSystem = await getFileSystem();
    const tree = await getEntriesTree(fileSystem.root);
    console.log('file system tree:', tree);
})();