Add apollo client dev tools to chrome developer tools - google-chrome-devtools

I have downloaded the chrome extension Apollo Client Devtools. However it is not visible when devtools are open. Is there a way of adding this or is it a bug?

I had the same issue, tried closing the tab and re-opening, closing chrome and re-opening but nothing of that helped. Then I installed a totally different extension (React Developer Tools) and all of a sudden the Apollo dev tools showed up, it seems that adding a new plugin somehow refreshed the plugins and it showed.

You have to close and re-open the tab.

You have to setup on the Apollo Client the following field:
const client = new ApolloClient({
connectToDevTools: true,
....
})

Related

how to use playwright with plugin (like stylus, a chrome plugin)

I am using chromium.launchPersistentContext to open a head chrome. I want to use plugins, like stylus, that change the css of the page. Why chrome plugins does not appear with my local chrome instance ? I can see the bookmark, have the session saved, but no plugins appearing. Any idea ?
Extensions only work in Chrome / Chromium in non-headless mode, launched with a persistent context.
Are you using headless mode?
or have you tried --load-extension?
https://playwright.dev/docs/chrome-extensions

Why I do not see devtools tab of ny chrome browser?

I installed Vue.js devtools in my Google Chrome 96 :
https://prnt.sc/2154uz3
But opening laravel 8/vuejs3 app I do not see vue tab in console of my browser : https://prnt.sc/2155psy
What is wrong and how can it be fixed?
Thanks in advance!
The Vue.js shows a tab in dev tools.
Be aware, this will not show if your application is running in production.
NB! You can try this for production mode, it will try build up the same data:
https://chrome.google.com/webstore/detail/vue-force-dev/oohfffedbkbjnbpbbedapppafmlnccmb

How to debug Angular SPA in either vs2019 or vscode

This may be a stupid question, but I can't figure out how to debug my whole application in either vscode or vs2019 community. If I use vs2019, I can debug the api, controllers, etc just fine, but can't debug the typescript or js. If I use vscode, I can debug the typescript, but it doesn't make the calls to the api so the app locks up...
Any suggestions? I've tried the google extension in vscode but still can't debug the typescript code.
Thanks in advance.
You do it in the Chrome dev tools, hit F12 in Chrome and go to the sources tab. Hit ctrl-p to search for the source file. You can set break point in the TypeScript.

Service-worker.js not available in the for debugging in the chrome dev tools

I understand service-worker runs as a separate thread parallel to the main thread.
I have an android app that runs Webview. My app is in react and i use workbox strategies for caching.
Service worker updates everytime I do a new build. However the source file of service-worker.js is not available in the chrome dev tools for me to debug.
Any idea how i can get the file there so that i can put breakpoints and debug ?
PS: just few days before i could get the file for debugging the dev tools. I am not sure what has changed. I havent changed any settings the the browser.
I'm having the exact same problem with the same symptoms and timeframe. I tried everything I can think of and can no longer get remote debugging of a service worker running in an Android WebView to work.
Like you I am sure it was working in mid-February and stopped working in the last few weeks.
I submitted a bug to Google which you can find here.
I think we can only hope it will be fixed in an upcoming release of Chrome.
You can inspect your extension's service worker but it's tricky, I don't know why Chrome doesn't show the service worker in the default chrome extension devtools.
here is how you can do it:
open chrome://serviceworker-internals/?devtools
find your extension there, there is a textarea that shows console logs, every console log will show the extension path in chrome e.g.
Console: {"lineNumber":688,"message":"[crx-helper] connection error","message_level":3,"sourceIdentifier":3,"sourceURL":"chrome-extension://aobpjedackhiamobjolncblfckdgfjbk/background.bundle.js"}
get that sourceUrl chrome-extension://aobpjedackhiamobjolncblfckdgfjbk/background.bundle.js yours will have a different id, which you can also see in chrome://extensions
paste that path in a new tab and open devtools (screenshot).

Getting rid of browser restart on plugin installation

I have been working on a browser plugin for windows which involves displaying camera output in browser. Presently I'm working on Windows 7. After plugin installation, I want to start the plugin immediately without restarting the browser. I noticed that as soon as plugin is registered, it started working in Google Chrome Version 24.0.1312 as well as in Internet Explorer 9. But it fails to do so in Mozilla Firefox 18.0.1. Can anyone help me solve this problem of restarting the browser after plugin installation. And will this problem occur in MacOS as well?
Thanks
You need to do a navigator.plugins.refresh(false); in javascript to tell the browser to rescan the plugins.
Explore /Installer/js -folder in FireBreath sources