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"}

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?

Chrome dev tools Properites tab documentation

Where can I find documentation for Chrome dev tools Properties tab in the Elements panel? I can find doco on Styles tab but not on Properties.

Also, does Firefox dev tools have an equivalent (in particular I was looking for img – currentSrc)?

Chrome dev tools Properties tab documentation

Where can I find documentation for Chrome dev tools Properties tab in the Elements panel? I can find doco on Styles tab but not on Properties.

Also, does Firefox dev tools have an equivalent (in particular I was looking for img – currentSrc)?

How do I simulate a websocket disconnect manually? (Firefox or Chrome dev tools)

How do I simulate a websocket disconnect manually? I’m trying to test websocket reconnect logic, and I have no way of doing this other than waiting for the browser’s 10 minute websocket timeout.

Copy HTML in Firefox or Chrome Inspector as displayed (maintaining indentation and formatting)

I would like to know if there is a way, either in the inspector (developer tools) of Firefox or Chrome, to copy html exactly like the dev tool is displaying it.

A lot of pages don’t have well formatted code. If you go to “View Source Code” (CTRL+U) it’s sometimes a mess. The dev tools of both browser do a very neat formatting and indentation, but I cannot figure out how to copy it.

For example, the code looks like this in the inspector:

[Formatted code in Firefox dev tool]

Pasted to sublime text, it is just one long line of code:


Is there a developer tool for inspecting content area height as opposed to inline height?

Is there a developer tool to help measure and distinguish the heights of an inline element’s inline box and its content area? Ideally, this would be a built-in developer tool in the browser. It would be able to do things like put a border around both the inline box and the content area, or add different background colours to each.

Context

Given some HTML code of an inline element like this, there are multiple heights to consider:

inline element

Here’s a diagram of the resulting inline element, with the heights of the various areas pointed out:

Diagram

a. This is the height of the content area, 15px high.

b. This is the height of the inline box, 21px high.

c. The grey area is the content area.

d. The green area at the bottom is the bottom half-leading, and it’s 3px high, the result of the calculation of b. minus a. divided by two.

If you add a border to the element, the border is placed around the content area, not around the inline box. I don’t know of a way to put a border round the inline box.

inline element

Note that there are situations in which the inline box can actually be smaller than the content area.

I’m looking for developer tools that can show the difference between these two things.

Chrome developer tools strange behavior

I try to play around with scope variable in js and using chrome developer tools. I am trying to acces closure variables, like this:

"use strict"

var Dog = function(){                                                                   
  this.color = "brown";                                                             
  this.weight = "10";                                                               
} 

Dog.prototype.generateCode = function(){                                            
  var codeSeparator = "#";               
  var _this = this;

  return label();                                                                   
  function label(){
    debugger;                             
    return _this.color + _this.weight;                              
  }     
}       

var d = new Dog();                            
d.generateCode();

When I try to access the variable codeSeparator I get an error using chrome developer tools but Firefox is fine with that.

On the other hand, if I use the variable in the function, chrome seems to be fine:

  //...                                                        
  function label(){
    debugger;                             
    return _this.color + codeSeparator + _this.weight;                              
  }        

I am not sure if this is a bug with chrome developer tools or a JS concept I don’t get.

How can I use DevTools to see what font is being used in an SVG?

I am trying to find out what font is used in an SVG marker that’s placed on a Google Maps surface. Specifically, 9 on a blue marker in this codepen.

The label is set with these properties:

label: {
    text: "9",
    color: "white",
    fontWeight:"bold"
},

However, when I use either Chrome or Firefox to zero into the marker, I get the same font-weight regardless of what fontWeight property is set to.

Is there a way to do it?

What is the equivalent of Chrome’s “add source map” in Firefox

On chrome I can add a custom source map url for my bundle.js.

From the chrome sources panel, I can click on bundle.js then right-click inside the source window and I have the option add source map. How can I achieve the same in firefox?