Why don’t apollo-client’s GraphQL queries appear in Chrome’s XHR Network filter?

I’m using apollo-client, and I’ve just noticed that my GraphQL queries don’t appear on the list of Network calls when the XHR filter is active.

How is this possible? GQL is just a set of semantics on top of regular old HTTP, right? It’s not like a JS library can introduce a whole new networking capability.

In the first image below, you see me filtering for requests with “gra” in them; two appear: the OPTIONS call, and then the POST (which is the real meat). In the second image, I additionally filter by XHRs; the POST is gone.

enter image description here

The “XHR” filter says it captures “XHR and Fetch”. The only alternative I can think of would be dynamically adding

Chrome Node DevTools Inspector stopped listing files

Title says it all. I haven’t made any major code changes and the debugger is still connecting. However, it isn’t listing any files:

Did something change in the Node dev tools to stop these files from showing up? This is all very mysterious and I’ve seen instances of other developers ‘losing’ their source folder listings when using --inspect with Chrome Node DevTools. enter image description here

However, Cmd/Ctrl-P still lists the files and clicking on file names in the logs still takes me to the files (assuming I don’t get some mysterious alternate empty version). Why can I no longer navigate my project’s file system from Node Debugger on Chrome?

I have checked to make sure that the files are loaded (they are, as you can see, properly running and these particular microservices are responding as expected and pass tests). So I don’t think it’s an issue with my code.

How to Get js.map Files to Work With UMD Modules?

I have the following TS Files:

MapTest

module Test
{
    export function myTest() {
        const zero = 0;
        const two = zero + 2;
        const four = two + two;
        const six = four + two;
        console.log(six);
    }
}

MapModuleTest.ts

export module Test
{
    export function myTest() {
        const zero = 0;
        const two = zero + 2;
        const four = two + two;
        const six = four + two;
        console.log(six);
    }
}

When I attempt to set break points and debug the TypeScript for MapTest in either Chrome or FireFox, everything works as expected. When I attempt to debug MapModuelTest.ts, the TypeScript line appears to be two lines ahead in both Chrome and Firefox than the actual JS. So if I put a breakpoint on this line const six = four + two; it acts as if the JS is actually breaking on line this line const two = zero + 2; (i.e. zero is defined to be 0, but two is undefined)

Is this a known bug? Does UMD generation need something different in order to work correctly for .map files?

The debugger window is even more interesting in that the local does not match the console.
enter image description here

Here are the related JS and Map files

MapTest.js

var Test;
(function (Test) {
    function myTest() {
        var zero = 0;
        var two = zero + 2;
        var four = two + two;
        var six = four + two;
        console.log(six);
    }
    Test.myTest = myTest;
})(Test || (Test = {}));
//# sourceMappingURL=MapTest.js.map

MapTest.js.map

{"version":3,"file":"MapTest.js","sourceRoot":"","sources":["MapTest.ts"],"names":[],"mappings":"AAAA,IAAO,IAAI,CASV;AATD,WAAO,IAAI;IAEV;QACC,IAAM,IAAI,GAAG,CAAC,CAAC;QACf,IAAM,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC;QACrB,IAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;QACvB,IAAM,GAAG,GAAG,IAAI,GAAG,GAAG,CAAC;QACvB,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAClB,CAAC;IANe,WAAM,SAMrB,CAAA;AACF,CAAC,EATM,IAAI,KAAJ,IAAI,QASV"}

MapModuleTest.js

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Test;
    (function (Test) {
        function myTest() {
            var zero = 0;
            var two = zero + 2;
            var four = two + two;
            var six = four + two;
            console.log(six);
        }
        Test.myTest = myTest;
    })(Test = exports.Test || (exports.Test = {}));
});
//# sourceMappingURL=MapModuleTest.js.map

MapModuleTest.js.map

{"version":3,"file":"MapModuleTest.js","sourceRoot":"","sources":["MapModuleTest.ts"],"names":[],"mappings":";;;;;;;;;;;IAAA,IAAc,IAAI,CASjB;IATD,WAAc,IAAI;QAEjB;YACC,IAAM,IAAI,GAAG,CAAC,CAAC;YACf,IAAM,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC;YACrB,IAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;YACvB,IAAM,GAAG,GAAG,IAAI,GAAG,GAAG,CAAC;YACvB,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC;QANe,WAAM,SAMrB,CAAA;IACF,CAAC,EATa,IAAI,GAAJ,YAAI,KAAJ,YAAI,QASjB"}

Catching tags fired on website [JS]

do you know way, how to catch particular tag fired on the website? I think, i would basically know the way it works in network section in chrome developer tools, but to get to this data by javascript

chrome dev tools and google adsense – CPU 95% usage

On my website I’ve got Google Adsense to generate revenue. Whenever I open Chrome Developer Tools the CPU usage rises to 95%. When I disable ads or use AdBlock Plus and refresh the usage goes down to around 15%.

I’ve got laptop with i5-6400 processor and GTX950M graphics card, and using Windows 10 if it helps.
Firefox does not suffer the same problem.

Did you ever come across this problem? How to make dev tools or ads use less CPU?

How to use chrome.alarms in place of setInterval in chrome extension?

DOM-based timers, such as window.setTimeout() or window.setInterval(), are not honored in non-persistent background scripts if they trigger when the event page is dormant. Instead, use the alarms API.

I read this from https://developer.chrome.com/extensions/background_migration

I am implementing setInterval in my chrome extension, can anyone please let me know how I can use chrome.alarms as a substitute.


Thanks

Chrome Devtools is missing Sources when attached to remote Node JS

I’m running Chrome 67 on Windows connecting to my Ubuntu PC which is running NodeJS 8
I have an ssh tunnel setup to the Ubuntu PC so I can connect the Chrome Debugger to Node.

Chrome://inspect/#devices correctly spots the Remote Target

This allows me to click on the inspect link to open the debugger.

The Debugger connects and the console prints debug data from the running Node JS app confirming that things look good.

In the console messages, I can click on the links and have them open the source files

If I click on the Sources tab, I expect to see a Sources side panel (ref) displaying the file hierarchy but it seems to be completely lacking.

screenshot of chrome dev tools

enter image description here

If I click on Add folder to workspace then it opens up a local file browser.

Has this feature been removed in newer versions of Chrome? If so is there a new way to view the remote file list?

Chrome Extension, debugger API, network throttling

Has anyone got this to work reliably?

Here’s the code that I’m using.

function attachDebugger(tabID) {
    return new Promise(resolve => {
        chrome.debugger.attach({tabId:tabID}, "1.3", function() {
            console.log(`Debugger Opened`);
            resolve();
        });
    });
}

function throttleBandwidthDebugger(tabID) {
    return new Promise(resolve => {
        chrome.debugger.sendCommand(
            {tabId: tabID},
            "Network.emulateNetworkConditions",
            {offline: false, latency: 500, downloadThroughput: 768000, uploadThroughput: 153600},
                function() {
                    console.log(`Debugger Bandwidth Set to 768000 bytes/sec`);
                    resolve();
            });
    });
}

I have found that changing the downloadThroughput does not change the speed of the same site downloaded multiple times. There’s clearly some sort of throttling going on, as the speed increases from my normal time to download the same site. But it bears no resemblance to the speed changes I get when manually throttling in devtools.

Any help, anyone?

Angular 6 with Chrome device toolbar click event firing multiple times

I’m new to the world of Angular and am just starting a web app in Angular 6. I ran into this strange problem today while trying to show/hide my menu on a click. For some reason, in the Chrome device toolbar (trying to emulate a phone to develop for mobile first) it will fire the click event twice unless I use the very edge of the touch circle on the icon. It works in the normal Chrome window with the mouse pointer as well as in Firefox’s “responsive design mode” which basically is the same thing as Chrome’s device toolbar mode. This makes me suspect it has something to do with the simulated touch it’s doing, but I’m not sure. Is there anything I’m doing wrong or that I should be worried about? Or this a weird Chrome bug? I’m not to the point where I can actually test this on a phone, sadly.

In-progess code below:


  
Geomni PRODUCTS

And the component here:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  showMenu = false;

  constructor() {

  }

  toggleMobileMenu() {
    this.showMenu = !this.showMenu;
  }

  ngOnInit() {
  }

}

enable Chrome flags from the command line

I want to enable a flag (enable-token-binding) while launching chrome.
I can do that using chrome://flags page. but for running tests I need to do it from command line.

I tried

chrome –enable-features=token-binding

chrome –enable-token-binding

None of them worked.