Chrome Dev Tools: How to simulate offline for a particular domain than the entire network?

Question

Use case?
Firebase has a new product Firestore, that enables offlinePersistence as per their documentation.

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

I want to test a situation, where the app loads, but there is no connection made to firebase (think of Progressive Web App with cached static assets by serviceworker), but no network to connect to Firebase.

My code looks like

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>
};

Question
Is there a way in Chrome Developers Tool, to simulate/disable calls to a specific domain?

Answer 1

You are looking for the "Request Blocking" feature. To use this go to the overflow menu, then "More Tools", then click on "Request Blocking". This opens the proper panel in the drawer to block requests to a certain domain or resource.

Finding the menu item.

The request blocking panel.