Chrome dev tools source tab stripping out instances of object destructuring

I have a block of code that’s being using on the front end that has a section

if (changed.firstName || changed.lastName) {
  const { firstName, lastName } = ctx;

but whenever the debugger gets triggered the const { firstName, lastName } = ctx line isn’t available.

“Script” Category under Scope

I am and inspecting a simple script’s execution context in chrome dev tools. I noticed on a breakpoint or debugger statement, chrome dev tools displays a new category in the scope section. It has:

  • Local
  • Script
  • Global

I believe script has to do with how let and const are stored, since they are not attached to the global window object. However, my understanding is that they are still in the “global scope” but not bound to the global object.

I believe the “Script” label is representing this idea, but why is the name “script” chosen?

I checked the documentation but unfortunately, it doesn’t mention what “Script” is.

Here is a screenshot of my example:

enter image description here

Does anyone have any insight on the naming convention used?

A way to reset Chrome DevTools console’s context

Is there any feature in Chrome > DevTools > console which clears / resets / removes variables and functions declared while testing through it (just like calling clear, clears the logs)?

Let’s say, for an example, I have a variable declared with let keyoword..

let str = "Hello";

..and I run it through console once and I re run the same code through console again.

Yeah, It would throw an error “Identifier ‘str’ has already been declared” as expected because the variable has already been declared and it can’t be declared again (unlike declaring it with var keyword) so to re run the code through console, I have to refresh the page which resets the context of the frame / target.

Is there any other option?

Gather Layer Borders data through Javascript

I am writing an own tool for profiling my web performance issues. I spotted an necessity to observer amount of separate composite layers on my website. I am looking through web APIs on MDN, but I can’t find any suitable API. Do you know if there is any possibility to gather that data on website, through javascript?
To be specific i need the data displayed inside the ‘Layers borders’ option located inside ‘Rendering’ tab in Chome Developer Tools.


Addon – unable to add module in content_script for firefox addon

Below is the project structure of a addon I’m trying to develop.

├── sc_back.js
├── sc_cont.js
├── icons
│   ├── addon
│   │   ├── icon-48.png
│   │   └── icon-96.png
│   └── context
│       ├── d-16.png
│       ├── d-32.png
│       ├── e-16.png
│       └── e-32.png
├── manifest.json
├── modules
│   └── sc_de.js
└── popup
    ├── action.css
    ├── action.html
    └── action.js

There is some JS code that is redundant between content script sc_cont.js and popup action script in popup/action.js so I decided to move that redundant part into a separate folder at modules/sc_de.js.

I added below lines at my content_script and at module script:

import { xyz } from './modules/sc_de.js'

export const xyz = {...}

I tried adding the modules script in manifest.json in the content_script array but it’s not working. Haven’t tried in web_accessible_resources as this is not supposed to be accessible from the DOM.

Problem is when I launch the addon debugger, it shows the following error:

SyntaxError: import declarations may only appear at top level of a module
SyntaxError: export declarations may only appear at top level of a module

How do I resolve these errors to make the addon work? Also, do I need to do anything special in case of popup/action.js as well?

ES6 (React) in Chrome debugger not working


Hi there, as you may see in the screen capture. I have a snippet of javascript code (ES6/React) opening in the latest Chrome (66.0.3359.170) developer tool.

Part of the code shown correctly as Javascript Code, however from line 31, the code looks like some kind of plain text and there is no way to inspect into the inputs and variables.

Anyone know how to fix it? BTW, latest FireFox works fine in my environment.



Override document.location.replace with document.location.assign in Chrome

I am asking this for personal user. I have full admin access and can write a chrome plugin or do anything else required. I don’t like this and prefer to see all history items. Is it possible to override it locally for myself.

How to import ES6 modules in content script for Chrome Extension

In Chrome 61 there was added support for modules in JavaScript. Right now I am running Chrome 63.

I am trying to figure out how to use import/export syntax in Chrome extention content script to use modules.

In manifest.json:

“content_scripts”: [

        "js": [

In my-script.js in same directory as content.js

'use strict';

const injectFunction = () => window.alert('hello world');

export default injectFunction;

In content.js

'use strict';

import injectFunction from './my-script.js';

I receive this error:
Uncaught SyntaxError: Unexpected identifier

If I change the import syntax into import {injectFunction} from './my-script.js'; I get this error: Uncaught SyntaxError: Unexpected token {

Is there some issue with using this syntax in content.js in Chrome extention since in HTML you have to use

Unchecked runtime.lastError while running input.ime.sendKeyEvents: Engine is not available

I have this code:

let ime_api = chrome.input.ime;

export const sendKey = (options, cb = null) => {
    return ime_api.sendKeyEvents(options, cb);

export const sendSpaceKey =  (cb) => {
        contextID: 0,
        keyData: [{
            type: 'keyup',
            requestId: 'fewfavoihifgyiurhs',
            key: ' ',
            code: 'Space',
            type: 'keydown',
            requestId: 'gjsghgusyrurgfkeufygsfr',
            key: ' ',
            code: 'Space',
    }, cb);

sendSpaceKey(() => console.log('Space clicked'));

Chrome return me:

Unchecked runtime.lastError while running input.ime.sendKeyEvents: Engine is not available

enter image description here


Can’t get references to es6 classes in chrome extensions

I’m currently trying to update my chrome extension with es6 classes. It works fine in the context of the background scripts. But I can’t access this classes from within the ui page (i.e. the extension’s popup) using chrome.extension.getBackgroundPage().


function Foo() { ... }
class Bar { ... }


var bg = chrome.extension.getBackgroundPage();
console.log(bg.Foo) // function
console.log(bg.Bar) // undefined

I found this simple workaround:


class Bar {}
var export = { Bar : Bar };


var bg = chrome.extension.getBackgroundPage();
console.log(bg.export.Bar) // class

Any ideas why it’s not possible to get direct access to classes via the ‘bg’ object?