Browser javascript output doesn't show classname (unlike Node)
Нello! I have the following short bit of javascript:
let DynamicallyNamedClass = className => {
let F = function() {
this.v = 'hi';
};
Object.defineProperty(F, 'name', { value: className });
return F;
};
let AmazingClass = DynamicallyNamedClass('AmazingClass');
let amazingInstance = new AmazingClass();
console.log(amazingInstance);
The output here is more or less useful depending on whether this code runs in Node, or in the browser (chrome):
In Node console.log gives me very nice output:
>> AmazingClass { v: 'hi' }
In the browser, not so nice at all:
>> F {v: "hi"}
Why doesn't the browser (chrome) show me the name of this dynamically named class in debug output? Why doesn't Object.defineProperty seem to apply? I can use a much uglier technique to get the dynamic class name to show up:
let DynamicallyNamedClass = className => {
return eval(
`let FF = function ${className}() {` +
` this.v = 'hi';` +
`};` +
`FF;`
);
};
let amazingInstance = new (DynamicallyNamedClass('AmazingClass'))();
console.log(amazingInstance); // Shows up nicely!
If dynamically naming classes can be achieved, why force such an ugly approach? Why not adopt something closer to what Node uses when displaying the names of classes in debug output? Is there any rhyme or reason here?
javascript node.js browser class-names
asked Nov 22 '18 at 21:16
Gershom MaesGershom Maes
1,9631330
add a comment |
Нello! I have the following short bit of javascript:
let DynamicallyNamedClass = className => {
let F = function() {
this.v = 'hi';
};
Object.defineProperty(F, 'name', { value: className });
return F;
};
let AmazingClass = DynamicallyNamedClass('AmazingClass');
let amazingInstance = new AmazingClass();
console.log(amazingInstance);
The output here is more or less useful depending on whether this code runs in Node, or in the browser (chrome):
In Node console.log gives me very nice output:
>> AmazingClass { v: 'hi' }
In the browser, not so nice at all:
>> F {v: "hi"}
Why doesn't the browser (chrome) show me the name of this dynamically named class in debug output? Why doesn't Object.defineProperty seem to apply? I can use a much uglier technique to get the dynamic class name to show up:
let DynamicallyNamedClass = className => {
return eval(
`let FF = function ${className}() {` +
` this.v = 'hi';` +
`};` +
`FF;`
);
};
let amazingInstance = new (DynamicallyNamedClass('AmazingClass'))();
console.log(amazingInstance); // Shows up nicely!
If dynamically naming classes can be achieved, why force such an ugly approach? Why not adopt something closer to what Node uses when displaying the names of classes in debug output? Is there any rhyme or reason here?
javascript node.js browser class-names
asked Nov 22 '18 at 21:16
Gershom MaesGershom Maes
1,9631330
1
In Firefox getObject {v:'hi'}...even less informative . No standards for how different environments parse things to the console.
– charlietfl
Nov 22 '18 at 21:33
1
Note the defineProperty is working ...console.log(AmazingClass.name)
– charlietfl
Nov 22 '18 at 21:37
Try to not assign the function to a variable (F).
– Bergi
Nov 22 '18 at 22:11
2
Most people don't realise this butconsole.logis non-standard. It is literally not specified in any standard. Each version ofconsole.logis implemented however the implementer thinksconsole.logshould behave
– slebetman
Nov 23 '18 at 0:25
add a comment |
Нello! I have the following short bit of javascript:
let DynamicallyNamedClass = className => {
let F = function() {
this.v = 'hi';
};
Object.defineProperty(F, 'name', { value: className });
return F;
};
let AmazingClass = DynamicallyNamedClass('AmazingClass');
let amazingInstance = new AmazingClass();
console.log(amazingInstance);
The output here is more or less useful depending on whether this code runs in Node, or in the browser (chrome):
In Node console.log gives me very nice output:
>> AmazingClass { v: 'hi' }
In the browser, not so nice at all:
>> F {v: "hi"}
Why doesn't the browser (chrome) show me the name of this dynamically named class in debug output? Why doesn't Object.defineProperty seem to apply? I can use a much uglier technique to get the dynamic class name to show up:
let DynamicallyNamedClass = className => {
return eval(
`let FF = function ${className}() {` +
` this.v = 'hi';` +
`};` +
`FF;`
);
};
let amazingInstance = new (DynamicallyNamedClass('AmazingClass'))();
console.log(amazingInstance); // Shows up nicely!
If dynamically naming classes can be achieved, why force such an ugly approach? Why not adopt something closer to what Node uses when displaying the names of classes in debug output? Is there any rhyme or reason here?
javascript node.js browser class-names
asked Nov 22 '18 at 21:16
Gershom MaesGershom Maes
1,9631330
Нello! I have the following short bit of javascript:
let DynamicallyNamedClass = className => {
let F = function() {
this.v = 'hi';
};
Object.defineProperty(F, 'name', { value: className });
return F;
};
let AmazingClass = DynamicallyNamedClass('AmazingClass');
let amazingInstance = new AmazingClass();
console.log(amazingInstance);
The output here is more or less useful depending on whether this code runs in Node, or in the browser (chrome):
In Node console.log gives me very nice output:
>> AmazingClass { v: 'hi' }
In the browser, not so nice at all:
>> F {v: "hi"}
Why doesn't the browser (chrome) show me the name of this dynamically named class in debug output? Why doesn't Object.defineProperty seem to apply? I can use a much uglier technique to get the dynamic class name to show up:
let DynamicallyNamedClass = className => {
return eval(
`let FF = function ${className}() {` +
` this.v = 'hi';` +
`};` +
`FF;`
);
};
let amazingInstance = new (DynamicallyNamedClass('AmazingClass'))();
console.log(amazingInstance); // Shows up nicely!
If dynamically naming classes can be achieved, why force such an ugly approach? Why not adopt something closer to what Node uses when displaying the names of classes in debug output? Is there any rhyme or reason here?
javascript node.js browser class-names
javascript node.js browser class-names
asked Nov 22 '18 at 21:16
Gershom MaesGershom Maes
1,9631330
asked Nov 22 '18 at 21:16
Gershom MaesGershom Maes
1,9631330
edited Nov 22 '18 at 23:07
Gershom Maes
asked Nov 22 '18 at 21:16
Gershom MaesGershom Maes
1,9631330
asked Nov 22 '18 at 21:16
Gershom MaesGershom Maes
1,9631330
asked Nov 22 '18 at 21:16
Gershom MaesGershom Maes
1,9631330
1,9631330
1
In Firefox getObject {v:'hi'}...even less informative . No standards for how different environments parse things to the console.
– charlietfl
Nov 22 '18 at 21:33
1
Note the defineProperty is working ...console.log(AmazingClass.name)
– charlietfl
Nov 22 '18 at 21:37
Try to not assign the function to a variable (F).
– Bergi
Nov 22 '18 at 22:11
2
Most people don't realise this butconsole.logis non-standard. It is literally not specified in any standard. Each version ofconsole.logis implemented however the implementer thinksconsole.logshould behave
– slebetman
Nov 23 '18 at 0:25
add a comment |
1
In Firefox getObject {v:'hi'}...even less informative . No standards for how different environments parse things to the console.
– charlietfl
Nov 22 '18 at 21:33
1
Note the defineProperty is working ...console.log(AmazingClass.name)
– charlietfl
Nov 22 '18 at 21:37
Try to not assign the function to a variable (F).
– Bergi
Nov 22 '18 at 22:11
2
Most people don't realise this butconsole.logis non-standard. It is literally not specified in any standard. Each version ofconsole.logis implemented however the implementer thinksconsole.logshould behave
– slebetman
Nov 23 '18 at 0:25
1
1
In Firefox get
Object {v:'hi'} ...even less informative . No standards for how different environments parse things to the console.– charlietfl
Nov 22 '18 at 21:33
In Firefox get
Object {v:'hi'} ...even less informative . No standards for how different environments parse things to the console.– charlietfl
Nov 22 '18 at 21:33
1
1
Note the defineProperty is working ...
console.log(AmazingClass.name)– charlietfl
Nov 22 '18 at 21:37
Note the defineProperty is working ...
console.log(AmazingClass.name)– charlietfl
Nov 22 '18 at 21:37
Try to not assign the function to a variable (
F).– Bergi
Nov 22 '18 at 22:11
Try to not assign the function to a variable (
F).– Bergi
Nov 22 '18 at 22:11
2
2
Most people don't realise this but
console.log is non-standard. It is literally not specified in any standard. Each version of console.log is implemented however the implementer thinks console.log should behave– slebetman
Nov 23 '18 at 0:25
Most people don't realise this but
console.log is non-standard. It is literally not specified in any standard. Each version of console.log is implemented however the implementer thinks console.log should behave– slebetman
Nov 23 '18 at 0:25
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438067%2fbrowser-javascript-output-doesnt-show-classname-unlike-node%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438067%2fbrowser-javascript-output-doesnt-show-classname-unlike-node%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
In Firefox get
Object {v:'hi'}...even less informative . No standards for how different environments parse things to the console.– charlietfl
Nov 22 '18 at 21:33
1
Note the defineProperty is working ...
console.log(AmazingClass.name)– charlietfl
Nov 22 '18 at 21:37
Try to not assign the function to a variable (
F).– Bergi
Nov 22 '18 at 22:11
2
Most people don't realise this but
console.logis non-standard. It is literally not specified in any standard. Each version ofconsole.logis implemented however the implementer thinksconsole.logshould behave– slebetman
Nov 23 '18 at 0:25