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?

createElement(script)/appendChild how to debug added script?

    var js = document.createElement("script");
    js.type = "text/javascript";
    js.innerHTML = layout[i].text;
    document.body.appendChild(js);

I am adding a script like that, notice there is no src, but innerHTML instead, a script is fetched on demand with XMLHttpRequest. Unfortunately the script does not appear in the dev tools, not in Chrome not in Firefox.

How to append a script from a source string so that I can still debug it in the devtools?

How to find the JS function being called from Chrome Dev Tools in Angular application?

I’m working on trying to find a defect in an angular application in the javascript being used to scroll a page. Person clicks link, page scrolls. Simple.

Alas, I have no idea what functions are actually being called when a user clicks the link and given this app consists of dozens and dozens (and dozens) of separate files, I’m having trouble finding what’s going on.

I’ve read about using breakpoints and setting them up via the SOURCES tab in devtools. However, regardless of which of the many JS files I open in there, I never get any breakpoint options to check.

Is there a way to see what JS is getting fired with a particular event on the page within Chrome’s Devtools?

How to break on document.write in Chrome DevTools?

Is there a way to break/trigger debugger on document.write() during page load, without knowing where it’s going to occur?

The whole page is blown away by some third party ad provider code, which must be executed without iframe, but I have to find a way to identify the source of these problems.

Can Chrome Debugger exclude node_modules files?

I am debugging through an Angular 5 application in the Chrome Debugger. Skipping through the core.js, zone.js and observable files can become cumbersome. Are there any fancy tips or tricks for excluding those files from my debugging?

Aurelia: Calling functions from the Chrome debug console

I am experienced, but new to Aurelia and cannot figure out how to call a specific function from the console.

Using this source:


import {} from 'css/style.css';
import {inject} from 'aurelia-framework';
import {DOM} from 'aurelia-pal';    
export class App {
  constructor() {
    this.message = 'Test Application';
    this.todos = ['a','b','c','d'];
    this.DOM = DOM;
  }
    getFish() {
        this.DOM.getElementById("#theMessage").style.color="green";
    }
}

I want to call getFish from the console. One may think that App.getFish() would do it, but no so much.

How DOES one call class functions in the debug console for Aurelia?

Blackboxing all other scripts using Chrome Debugger for JavaScript (Too many unique file names to type patterns)

I’m trying to step through a JS file in Chrome debugger but I can’t isolate the one method that I’d like to step through. By isolation, I mean that I would like to stay in this file while stepping through it and ignoring all others. I’d still like to see the functions being called within my file but not others. I’ve used blackboxing patterns but there are too many alternate files being called to blackbox them all. Is there a way to explicitly say “Look only in this file and nowhere else” using blackbox regex patterns? If not, is there a way to isolate one file in Chrome Debugger for JS? I’m fairly new to JavaScript so I’m just wondering if there’s a better mode of debugging.

Why isn’t chrome devtools evaluating, and displaying the value from each line of my jQuery, next to each line?

I’m trying to learn about JavaScript debugging. I’ve added some breakpoints, & then click on .movie & devtools is not displaying the value next to each line of the jQuery code. What am I doing wrong, please?

$(document).ready(function() {
//$('.cross').hide();


$('.movie').on('click', function() {
   var test = '5';
   var Ab = $('.movie').find('.title').val();
   var Ac = $(this).html();
   $(this).parents('.app').css('width', '450px');
   $(this).find('.cross').show();
   $('.movies').parents().find('.titlec').hide();

 }); // close .move click


 $('.movie').on('click', '.cross', function() {
    $(this).parents('.movies').find('.movie').find('.title').text();

  }); // close above function

}); //close document ready
/*--------------------
Body
--------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse farthest-corner at center top, #ffee75, #ff8930);
  color: #8b9095;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

@mixin center {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*--------------------
App
--------------------*/
.app {
  @include center;


  background: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
  width: 700px;
  margin: 0 auto;

}

  h2 {
    color: #525661;
    font-size: 17px;
    box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.1);
    padding: 20px 28px 0;
    margin: -6px 0 0 0;
  }



/*--------------------
Header
--------------------*/
header {
  padding: 30px;
  position: relative;
  height: 70px;

  h1 {
    @include center;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    color: #1c222b;

    strong {
      background: #F16018;
      color: #fff;
      display: inline-block;
      border-radius: 30px;
      padding: 6px;
      font-size: 83%;
      line-height: 1;
      position: relative;
      top: -1px;
      left: 2px;
    }
  }

  nav {
    cursor: pointer;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 28px;
    left: 28px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #363a47;
      border-radius: 2px;
      box-shadow: 0 5px 0 #363a47, 0 10px 0 #363a47;
    }
  }

  .search {
    position: absolute;
    top: 26px;
    right: 18px;
    cursor: pointer;

    svg {
      width: 20px;
      height: 20px;
    }
  }
}


/*--------------------
Movies
--------------------*/
.movies {
  display: flex;
  padding: 8px 18px;


}

  .movie {
    padding: 10px;
    cursor: pointer;
    width: 25%;
  }

    .poster {
      width: 100%;
      margin-bottom: 6px;
      border-radius: 4px;

      &.active {
        opacity: 0;
      }
    }

    .title {
      //text-transform: uppercase;
      color: #525661;
      margin-bottom: 4px;
      font-size: 16px;
    }

    .info {
      font-size: 11px;
      opacity: .8;
    }

    .desc {
      display: none;
    }
  }
}


/*--------------------
Detail
--------------------*/
.detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  padding: 37px 30px 30px 255px;
  display: none;

  &::before {
    content: '';
    background: #fff;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    opacity: 0;
    transition: all .4s cubic-bezier(.67,.13,.1,.81);
  }

  .close {
    position: absolute;
    top: 21px;
    right: 22px;
    width: 12px;
    height: 12px;
    cursor: pointer;
    border: 6px solid #FFF;
    box-sizing: content-box;
    z-index: 10;
  }

  .poster {
    position: absolute;
    z-index: 2;
    top: -10%;
    left: -6%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    //opacity: 0;
    transition: all .5s cubic-bezier(.67,.13,.1,.81);
  }


  .title,
  .info,
  .desc,
  .play,
  .close {
    transform: translateX(-50px);
    opacity: 0;
    transition: all .4s cubic-bezier(.67,.13,.1,.81);
  }

  .close {
    transform: translateX(10px);;
  }

  .title {
    font-size: 35px;
    font-weight: 300;
    color: #525661;
    margin-bottom: 5px;

  }

  .info {
    font-size: 11px;
    opacity: 0;
    margin-left: 2px;
  }

  .desc {
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.6;
  }

  .play {
    background: linear-gradient(90deg, #E4761F, #FF8B32);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 17px;
    margin: 30px 0 0 -2px;
    text-transform: uppercase;
    z-index: 10;
    outline: none !important;
    cursor: pointer;
    opacity: 0;

    svg {
      vertical-align: middle;
      position: relative;
      top: -2px;
      margin-right: 3px;
    }
  }
}

.detail.ready {

  &::before {
    opacity: 1;
  }

  .info {
    opacity: .8;
  }

  .poster {
    opacity: 1;
    transition-duration: .5s;
  }

  .title,
  .info,
  .desc,
  .play,
  .close {
    transform: translateX(0);
    opacity: 1;
    transition-delay: 0s;
    transition-duration: .5s;
  }

  .title {
    transition-delay: .2s;
  }

  .info {
    transition-delay: .3s;
  }

  .desc {
    transition-delay: .4s;
  }

  .play {
    transition-delay: .5s;
  }
}

//* {display: none;} *//




.cross {
  display: none;
}


.showmovie {
width: 100%;
min-width: 100%;


  }

.showmovie > .title {
  font-size: 2em;
  }
.showmovie > img {
  width: 250px;
}
.showmovie > .desc {
  font-size: 1.2em;
  display: block;
}
.showmovie > .cross {
  display: block;
}

.showmovie > .movie {
width: 100%;
min-width: 100%;

}




  
    
    



  

Most Popular Movies

Room
117 min 2015

Jack is a young boy of 5 years old who has lived all his life in one room. He believes everything within it are the only real things in the world. But what will happen when his Ma suddenly tells him that there are other things outside of Room?

×
Whiplash
167 min 2015
Under the direction of a ruthless instructor, a talented young drummer begins to pursue perfection at any cost, even his humanity.
×
Mad Max
120 min 2015
An apocalyptic story set in the furthest reaches of our planet, in a stark desert landscape where humanity is broken, and most everyone is crazed fighting for the necessities of life. Within this world exist two rebels on the run who just might be able to restore order. There's Max, a man of action and a man of few words, who seeks peace of mind following the loss of his wife and child in the aftermath of the chaos.
×
The Revenant
156 min 2015
In the 1820s, a frontiersman, Hugh Glass, sets out on a path of vengeance against those who left him for dead after a bear mauling.
×

enter image description here

Source not displaying in Source tab for web developer in Google Chrome

Cannot get the source to display. Any advice.
“parent.location.reload(true)” works, but that is a work around that does not feel right.

I have updated the extensions and the browser.

Screenshot of source tab

How to disable Chrome JavaScript console re-evaluation of arrays and objects?

I was wondering if there was some way to disable the re-evaluation of an object/array in the Chrome developer console?

Example:

// Array to be displayed
const my_array = [5, 6, 7, 8];
console.log(my_array);

// Change the array
my_array.push(9);
console.log(my_array);

// What is displayed in console
my_array: [5, 6, 7, 8, 9]
my_array: [5, 6, 7, 8, 9]

I have been circumventing this by using JSON.stringify() (which can be put inside a function such as log(message)), but it gets obnoxious to always have to use it.

I’m guessing it is using references to the arrays and objects which, on update of the arrays/objects, updates the log.

Is there a setting or an extension or some other feature that can stop Chrome from re-evaluating everything real-time?