你能从chrome开发工具检查一个web应用的文件系统吗?

vbopmzt1  于 2022-12-06  发布在  Go
关注(0)|答案(4)|浏览(167)

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

nimxete2

nimxete21#

如果你进入chrome://flags并启用“启用开发工具实验”,然后进入开发工具设置中的实验选项卡,有一个名为“文件系统检查”的实验可能会起作用。

gywdnpxw

gywdnpxw2#

文件系统检查is no longer available
我找不到官方声明,但看起来这个文件系统API很快就会被Chrome弃用,因为it was never accepted是W3C的标准,现在(2017年1月v.55)Google Chrome是唯一使用它的网络浏览器。

t40tm48m

t40tm48m3#

我花了很长时间来搜索检查员,因为其他人在他们的博客中显示。我使用的v.63,它不再存在。
但是他们的是另一种方法来做它与web终端。也许你可以这样做http://www.htmlfivewow.com/demos/terminal/terminal.html

2hh7jdfx

2hh7jdfx4#

正如其他回答所指出的,从v106(2022)开始,似乎没有一种内置的方式来查看Chrome开发者工具中的文件,这可能是因为文件系统API从未标准化。
MDN(2021-2022年)开始:
标准化该规范的工作早在2012年就被放弃了,但到那时,Google Chrome包含了自己的API实现。......人们试图创建一个提供Google 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);
})();

相关问题