DEV Community: Ismail PE

Chrome DevTools MCP

Ismail PE — Mon, 05 Jan 2026 08:53:25 +0000

Have you ever felt AI was blind when debugging your web app with AI agent? AI couldn't see the shift in UI layout? AI didn't care about the loading performance or issues with styles? AI couldnt see the errors on browser console? Yes these things are not visible to your AI agent. But there is a way.

With the power of using real browser, the AI agent can do better. ChromeDevtools MCP enables the ai agents to use a real browser, load the app, click buttons or fill form on the app, collect logs, take snapshots, and fix things with a real 'vision'. This guide is for VS Code but similar steps can be found for any IDE.

Install the extension

Open extensions (Ctrl + Shift + x) in VS Code
Search @mcp devtools
Install ChromeDevTools

Ensure the MCP server is running

Right click on the installed extension to get actions menu (you can do start/stop/restart/configure here)
Open the project folder in IDE for the AI agent to get the context.
You can also use npx chrome-devtools-mcp@latest --help to see all available configuration options.

Use it

Open the Copilot chat on the IDE and ask why my form is not centered or Test this form submission with all inputs or Check if layout shifts with error messages displaying on the form or Improve the LCP.

Tools

This MCP provides many tools to the AI agent. You can use '#' in chat to see the list of tools available. Here is an example with direct tools usage and in common words. Both will work. Use tools for a precise prompt and faster response.

#navigate_page home page and #fill_form first name: Adam, last name: Noah, #take_snapshot , #click submit, #wait_for submission, #list_network_requests , #list_console_messages

Navigate to the home page and fill the form with first name: Adam, last name: Noah. Click the submit button and wait for it. List down the console logs. List down the network requests.

Here is the Github page for more help

Using RTK with Nextjs

Ismail PE — Fri, 21 Mar 2025 05:57:16 +0000

A straight forward example of using Redux Tool Kit with Nextjs app.

redux/hooks.js

import { useDispatch, useSelector, useStore } from "react-redux";
// Use throughout the app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = useDispatch.withTypes();
export const useAppSelector = useSelector.withTypes();
export const useAppStore = useStore.withTypes();

redux/store.js

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../features/user/userSlice";

export const makeStore = () => {
  return configureStore({
    reducer: {
      user: userReducer,
      //list more if any
    }
  })
}

redux/StoreProvider.js

'use client'
import { useRef } from 'react'
import { Provider } from 'react-redux'
import { makeStore } from './store'

export default function StoreProvider({ children }) {
  const storeRef = useRef()
  if (!storeRef.current) {
    // Create the store instance the first time this renders
    storeRef.current = makeStore();
  }

  return <Provider store={storeRef.current}>{children}</Provider>
}

features/user/userSlice.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
//import axiosConfig as well

const initialState = {
  userInfo: {},
  isUserLoggedIn: false,
  isUserInfoLoading: true,
  //..add more state variables
};

const reducers = {
  setUserInfoResponse: (state, action) => {
    state.userInfo = action.payload;
    state.isUserLoggedIn = true;
    state.isUserInfoLoading = false;
  },
  //...add more functions to update state
};

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers,
});

export const getUserInfo = createAsyncThunk(
  "user/getUserInfo",
  async (params, { dispatch }) => {
  const { uid } = params;
    const userInfoResponse = await axiosConfig.get(
      `get_user_info/${uid}`,
    );
    if (userInfoResponse.data.status) {
      dispatch(setUserInfoResponse(userInfoResponse.data.data));
    }
  }
);

export const {
  setUserInfoResponse,
  //list other functions defined above if any
} = userSlice.actions;
export default userSlice.reducer;

_app.js

import StoreProvider from "../redux/StoreProvider";
import { SessionProvider } from "next-auth/react";

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
   <SessionProvider session={session}>
    <StoreProvider>
     <Component {...pageProps} />
    </StoreProvider>
   </SessionProvider>
  )
}
export default MyApp;

On components:

import { useAppDispatch, useAppSelector } from "../../redux/hooks";
import { getUserInfo } from "../../features/user/userSlice";

...
  const dispatch = useAppDispatch();
  const { isUserLoggedIn, isUserInfoLoading, userInfo } = useAppSelector(state => state.user);

inside useEffect or any logic:
dispatch(getUserInfo({ uid: 123 }));

Programmatically Whitelist new domains on Firebase app

Ismail PE — Fri, 19 Jan 2024 13:30:08 +0000

Why: You have an app which uses signInWithPhoneNumber function from firebase and your app allow users to create subdomains from your app. Now you have multiple domains which are not added to authorized list of domains on your firebase app. So users wont be able to sign in using phone number from the subdomain. Firebase doesn't allow wildcard to be added.

How: We will create an api which will add the newly created subdomain into the whitelist. This api will be called before user shoots the request to signin with firebase.

Notes:

You need service account credentials for getConfig and updateConfig operations
updateConfig replaces the list of domains. So we need to fetch the existing list and append to it.
Create and get private_key and service account email address from firebase console. Add them as env variables.

Steps:
When user clicks sign in with phone number button, call this api, which will add the subdomain to list of authorized list. Then call signInWithPhoneNumber.

API code:

//add new subdomain to white list
var jwt = require("jsonwebtoken");
export default async function handler(req, res) {
  // Get the current time in UTC seconds
  const currentTimestamp = Math.floor(Date.now() / 1000);
  // Set the expiry time to 60 minutes (60 * 60 seconds) from the current time
  const expiryTimestamp = currentTimestamp + 60 * 60;
  try {
    //create JWT for requesting access token from firebase
    const jwtForToken = jwt.sign(
      {
        iss: process.env.FIREBASE_SA_EMAIL,
        scope: "https://www.googleapis.com/auth/identitytoolkit",
        aud: "https://oauth2.googleapis.com/token",
        iat: currentTimestamp,
        exp: expiryTimestamp,
      },
      `${process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n')}`,
      { algorithm: "RS256" }
    );

    //use the JWT created and request access token from firebase
    const data = new URLSearchParams();
    data.append("grant_type", "urn:ietf:params:oauth:grant-type:jwt-bearer");
    data.append("assertion", jwtForToken);
    const tokenResp = await fetch("https://oauth2.googleapis.com/token", {
      method: "POST",
      headers: {
        "content-type": "application/x-www-form-urlencoded",
      },
      body: data,
    });
    const token = await tokenResp.json();

    //get current config data from firebase
    const configResp = await fetch(
      `https://identitytoolkit.googleapis.com/admin/v2/projects/${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}/config?key=${process.env.NEXT_PUBLIC_FIREBASE_API_KEY}`,
      {
        method: "GET",
        headers: {
          Authorization: `Bearer ${token.access_token}`,
        },
      }
    );
    const configData = await configResp.json();
    let authorizedDomains = configData.authorizedDomains;

    const { domain } = JSON.parse(req.body);
    if (authorizedDomains.includes(domain)) {
      res.status(200).json({ status: true, result: authorizedDomains });
    } else {
      //add new domain to whitelist
      authorizedDomains.push(domain);
      //patch the config to firebase with updated list of domains
      const updateRequestBody = new URLSearchParams();
      updateRequestBody.append("authorizedDomains", [authorizedDomains]);
      const configUpdateResp = await fetch(
        `https://identitytoolkit.googleapis.com/admin/v2/projects/${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}/config?updateMask=authorizedDomains`,
        {
          method: "PATCH",
          headers: {
            Authorization: `Bearer ${token.access_token}`,
          },
          body: JSON.stringify({ authorizedDomains }),
        }
      );
      res
        .status(200)
        .json({ status: configUpdateResp.status, result: authorizedDomains });
    }
  } catch (err) {
    // console.log("err", err)
    res.status(500).json({ status: false, result: err });
  }
}

Multiple api calls even for single saga action?

Ismail PE — Fri, 24 Jul 2020 15:49:20 +0000

I was facing this issue in my React app and I could not find the exact reason in internet. There were many hacks and solutions for the same symptom, but nothing worked for me. Finally i solved it by correcting a mistake in code. So thought of posting it here.

I had an action which fetches a data via api call. There were other actions also defined inside same saga file. And this saga was used in multiple containers. Whenever i navigate between these containers, and call any action from this saga, there were multiple api calls triggered. But saga was called only once.

Problem:
While injecting the saga, I was using different key names inside different containers for the same saga. Saga was supposed to automatically ignore the duplicate actions. But since the key was different, it considered all the calls as unique.

Solution:
I used same key for this saga in all the containers where this was injected. So simple.

It was totally my mistake to use different keys. But i found same question in forums and github issues. So may be this would help someone to solve the issue or rule out this reason for the symptom.

Thank you.

Duplicating a github repo with history

Ismail PE — Thu, 23 Jul 2020 16:52:56 +0000

Are you moving your codebase into a different versioning system? It's so easy to duplicate a github repository including every commits and branches.

1) Create a new repo in github using UI/command as usual. This will be the target repo where duplicate of source repo to be pasted.

2) Open a command prompt and Clone the source/existing repo using the command:

git clone --bare https://sourceRepoURL

A new folder will be created containing some files from source repo.

3) Move to that folder:
cd sourceRepoFolder

4) Push these files into the target repo using command:
git push --mirror https://targetRepoURL

That's it. Thank you.

Handling environment variable: React and AWS Cognito

Ismail PE — Thu, 11 Jun 2020 15:15:57 +0000

This post is for beginners. You can use the same code base for all environments if you have clearly handled the environment specific changes. Those changes should be minimised like the api urls. I have described the process in four steps.

First, I have created separate files where these differences are defined. For example, my files are named config.prod, config.qa and config.dev. And the contents of file is like
export default {
api: {
baseURL: “https://..”,
fetchUsers: “https://..”,
}
cognito: {
USER_POOL_ID: 1234,
}
}
Prod config file will have prod api url domain and dev config file will have dev api url domain.
If your endpoints are same for all environments, you can export it from a separate common file.
2: And i have written a util function which switches the custom environment variable (we will set in next step) and return corresponding config file.

export function getEnvConfig(){
let config = null
switch(process.env.REACT_APP_ENV){
case “dev”:
config = require(“../config.dev”)
break;
case “qa”:
config = require(“../config.qa”)
default:
config = require(“../config.prod”)
}
return config
}

3: And inside my saga/thunk, i have imported and used the urls from config file.

const config = getEnvConfig()
const fetchUserUrl = config.default.baseURL + 'getusers'

4.On AWS Cognito secret manager, for each environment, I added a new secret with the name REACT_APP_ENV and value as my corresponding environment.

That's all. You can now access access your custom environment variable in your code using process.env.REACT_APP_ENV

Thank you!