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?

Guidelines / indentation lines in Google Chrome Dev Tools

Is it possible to have guidelines / indentation lines inside Google Chrome dev tools? Check attached photo.

I was looking for it for quite a long time and it’s nothing there.

It would be very helpful in web development process.

enter image description here

Chrome font-display CSS property

I’ve been testing out font-display recently, however my Chrome browser (Chrome 65) at both work (Centos 7) and home (Windows 10) doesn’t seem to recognize it as a valid property. Looking in DevTools, the property has the yellow exclamation mark next to it, saying “Unknown Property Name”.

It was my understanding that font-display has been supported in Chrome since version 63.

For reference, I’m trying to set the value of font-display to swap.

Anyone have any ideas why I’m not seeing it work?

Thanks

Chrome Dev tools: Why sometimes a dominating CSS rule is crossed-out?

enter image description here

Normally a crossed rule means it is overridden by other rules somewhere, but in dev tool every now and then I see a dominating CSS rule being crossed-out, making me confused. See above picture. Please noted that changing the color in the crossed line actually affects the element on the page. Why is this?

What is the name of the Tabs widget in the devtools inspect panel?

What is the name of the tabs widget marked with a red circle in the image?
Anyone who does not recognize this is a devtools inspect panel, thanks!

tabs widget marked with a red circle

If there is no direct access to the above tabs widget, how do you view the HTML code and stylesheet of the panel?

When you make changes to a site using the browser’s dev tools, does the elements tab update?

Note: I’m using Chrome’s dev tools.

I created a section under the header using the console.

Under the console’s dev tools I type:

var Europe = document.createElement('section');
// undefined
Europe
// 
Europe.setAttribute('id', 'europe')

When I go the elements tab, I’m not seeing the section at all.

If I update the .js file, save it, and then reload the browser, would that cause the element tree to change?

I’m working on some DOM hw and it’s really giving me a hard time.

.js file:

console.log("test");

var citizens = ['Anka', 'Wallace', 'Pierre', 'Juan'];

var cuisines = ['French', 'English', 'Spanish', 'Russian'];

var body = document.querySelector('body');

function makeLocation() {
}

How to access SDK.NetworkDispatcher in chrome extension

I’ve tried access chrome sdk using devtools, but it wasn’t available in default console. So in current console I’ve pressed ctrl+shift+J and a new devtools openned and then there I could use the SDK.NetworkDispatcher in console.

My problem is I couldn’t create any code to devtools using this because SDK is not available in chrome extension. I’ve tried use background script, devtools script, panel script and nothing works.

This code bellow is what I was using. It works just in inspector of inspector.
It basically save each websocket frame in a json file. ( if you will try this, first check is your chrome is saving files automatically or asking for directory, if it is asking for directory, please change to automatic because it will save to much json files)

Anyway if someone can create an extension executing this code please let me know how.

// https://bgrins.github.io/devtools-snippets/#console-save 
(function(console){
  console.save = function(data, filename){
    if(!data) {
      console.error('Console.save: No data')
      return;
    }

    if(!filename) filename = 'console.json'

    if(typeof data === "object"){
      data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
    e = document.createEvent('MouseEvents'),
    a = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
  }
})(console)

// Frame/Socket message counter + filename
var iter = 0;

// This replaces the browser's `webSocketFrameReceived` code with the original code 
// and adds two lines, one to save the socket message and one to increment the counter.
SDK.NetworkDispatcher.prototype.webSocketFrameReceived = function (requestId, time, response) {
  var networkRequest = this._inflightRequestsById[requestId];
  if (!networkRequest) return;
  console.save(JSON.parse(response.payloadData), iter + ".json")
  iter++;
  networkRequest.addFrame(response, time, false);
  networkRequest.responseReceivedTime = time;
  this._updateNetworkRequest(networkRequest);
}

How to locate&run a specific funtion on a website using Chrome DevTools?

I’ve been trying to understand chrome devtools better. I’m constantly getting stuck on a specific task:

I would like to know what runs a specific js function on a website – and I would like to trigger them manually using the console.

However, sometimes the websites’s js is having a lot of objects-inside-objects and I’m having trouble locating what runs a specific function – and – triggering them manually.

I believe learning this will give me a lot of know-how in terms of debugging certain things on built websites, to understand more about how certain things are built.

Any help is appreciated.

How to locate & run a specific function on a website using Chrome DevTools?

I would like to know what runs a specific Javascript function on a website – and I would like to trigger them manually using the console.

However, sometimes the websites’s Javascript is having a lot of objects-inside-objects and I’m having trouble locating what runs a specific function – and – triggering them manually.

I believe learning this will give me a lot of know-how in terms of debugging certain things on built websites, to understand more about how certain things are built.

Developer Tools – Find Object (runtime)

I’m not sure if I’ll be using the correct terminology here, but let me try it as clean as possible..

I would like to use chrome developer tools in it’s full potential. Sometimes I see nice things on a website and I like to see the inner workings of that, so, I open chrome developer tools and inspect website elements to understand “how stuff works”

Sometimes I just want to understand what’s going on at run time..

For instance, I would like to see all defined objects or variables in a website during runtime, would it be possible to inspect everything that’s already defined, interactively? I know about the sources tab, but that just gives a brief idea off what’s going to happen, instead, I would like to know “what is going on right now”.

Would it be possible?