Chrome Dev Tools：如何模拟特定域的离线而不是整个网络？

Question

用例？
Firebase 有一个新产品 Firestore，根据他们的文档启用 offlinePersistence。

https://firebase.google.com/docs/firestore/manage-data/enable-offline?authuser=0#listen_to_offline_data

我想测试一种情况，应用程序加载，但没有与 firebase 建立连接（想想 serviceworker 具有缓存静态资产的渐进式 Web 应用程序），但没有网络连接到 Firebase。

我的代码看起来像

import React from "react";
import {fdb} from "../mainPage/constants";

// includeDocumentMetadataChanges to know when backend has written the local changes
// includeQueryMetadataChanges to know if changes come from cache using 'fromCache' property
// https://firebase.google.com/docs/firestore/manage-data/enable-offline?authuser=0#listen_to_offline_data
const queryOptions = {
    includeDocumentMetadataChanges: true,
    includeQueryMetadataChanges: true
};

const collectionName = "todos";
export default class ToDos extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [],
            textBox: "",
            loading: true
        }
    }

    componentWillMount() {
        let unsubscribe = fdb.collection(collectionName)

            .onSnapshot(queryOptions, function (querySnapshot) {
                let items = [];
                querySnapshot.forEach(function (doc) {
                    items.push(doc);
                    //console.log(" data: ", doc && doc.data());
                });
                this.setState({"items": items});
            }.bind(this));
        this.setState({"unsubscribe": unsubscribe});
    }

    componentWillUnmount() {
        this.state.unsubscribe();
    }

    handleTextBoxChange = (event) => {
        this.setState({textBox: event.target.value});
    };

    handleAddItem = () => {
        fdb.collection(collectionName).add({
            "title": this.state.textBox
        }).then(function (docRef) {
            //console.log("added " + docRef.id, docRef.get());
        });
    };

    handleRemoveItem = (item) => {
        console.log("Deleting: ", item.id);
        item.ref.delete()
            .then(function () {
                console.log(item.id + " deleted successfully");
            })
            .catch(function(reason){
                console.log(item.id + " failed to delete: ", reason);
            })
    };

    render() {
        return (
            <div>
                <div>
                    <input type="text" value={this.state.textBox} onChange={this.handleTextBoxChange}/>
                    <input type="submit" value="Add Item" onClick={this.handleAddItem}/>
                </div>
                <div>{this.state.items
                    .map((item, index) => <Item key={index}
                                                item={item}
                                                onDeleteClick={this.handleRemoveItem}/>)}</div>

            </div>
        )
    }
}

const Item = ({item, onDeleteClick}) => {
    let pendingWrite = item.metadata.hasPendingWrites ? "[PendingWrite]" : "[!PendingWrite]";
    let source = item.metadata.fromCache ? "[Cache]" : "[Server]";
    return <div>
        <input type="button" value="delete" onClick={() => onDeleteClick(item)}/>
        <span>{source + " " + pendingWrite + " " + item.data().title}</span>

    </div>
};

问题
Chrome 开发者工具中有没有办法 simulate/disable 调用特定域？

Answer 1

您正在查找 "Request Blocking" 功能。要使用它，请转到溢出菜单，然后选择 "More Tools"，然后单击 "Request Blocking"。这将在抽屉中打开适当的面板以阻止对特定域或资源的请求。

正在查找菜单项。

请求拦截面板。