Chrome开发者工具：如何模拟特定域名而不是整个网络离线？

Question

使用场景？
Firebase 推出了一个新产品 Firestore，它根据其文档使离线持久化变得容易。您可以通过以下链接查看相关文档：https://firebase.google.com/docs/firestore/manage-data/enable-offline?authuser=0#listen_to_offline_data 。我想测试一种情况，即应用程序加载时，没有与 Firebase 的连接（例如具有由服务工作者缓存的静态资产的渐进式 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开发者工具中，是否有一种方法可以模拟/禁用对特定域的调用？

- daydreamer

Answer 1

您正在寻找“请求阻止”功能。要使用此功能，请转到溢出菜单，然后选择“更多工具”，再点击“请求阻止”。这将打开抽屉中适当的面板，以阻止某个域或资源的请求。

查找菜单项。 请求阻止面板。

- Garbee

---

谢谢@Garbee，这正是我在寻找的。 - daydreamer

更新：截至2023年3月，它现在被称为“网络请求阻止”。 - mraxus