How color proprety obj in console debug? custom Theme devtool (SOLVED)

[Jonforum]

Hi everybody.

is there a way to color the properties of an object in a chromium debugging terminal? I would like to color some property to facilitate debugging. ex, sometime i use enumerable:false, it reduces the contrast but that is not enough.

i would like full control color for debug proprety in a debug console. thank you

i make a picture to show you what are my target for debuging color am try to reach.
anyone knows maybe a special plugin in JS who can do that in the terminal?

 

[Joy Diamond]

Not that I know of, I looked into this a lot (about 4+ hours), it would require a chrome extension.

This is clearly do-able; however, I would not feel comfortable asking others to install a chrome extension on top of the default nw.exe that comes with RPG Maker MV.

Also it seems it would take a few days to figure out how to do this: So I have reluctantly concluded its not worth the time, currently, to investigate chrome extensions (mostly since can't share it with others ... see above on putting chrome extension on top of nw.exe)

 

[LTN Games]

You could probably create your own logger, and apply css to your console output(like how pixi shows thier version log), this way when logging your object you can iterate across the properties and apply specific css to the ones you want highlighted. Should be fairly easy, I will see what I can do when I get time to play around.

 

[Jonforum]

Not that I know of, I looked into this a lot (about 4+ hours), it would require a chrome extension.

This is clearly do-able; however, I would not feel comfortable asking others to install a chrome extension on top of the default nw.exe that comes with RPG Maker MV.

Also it seems it would take a few days to figure out how to do this: So I have reluctantly concluded its not worth the time, currently, to investigate chrome extensions (mostly since can't share it with others ... see above on putting chrome extension on top of nw.exe)

I may have thought of an extension that will take the example of the additional property in define obj method
ex:

Object.defineProperty(this, "props", { ccd: "#4286f4", value: [] }); // ccd: allows the console color debug for a props

but hey, I try to get information elsewhere, maybe with luck.
https://groups.google.com/a/chromium.org/forum/#!topic/chrome-ux-report/J_f6d5OoOsc

I find it strange that the chrome debug console does not allow more color management.
There is that console.log that takes the CSS.
I remember using it for creating debugging plugin for picture in rmmv.

Spoiler: youtube

see plugin

i also try on stackoverflow, but i dont think its possible !

 

[Jonforum]

You could probably create your own logger, and apply css to your console output(like how pixi shows thier version log), this way when logging your object you can iterate across the properties and apply specific css to the ones you want highlighted. Should be fairly easy, I will see what I can do when I get time to play around.

if you manage to make object interpret with colored property.
wow i'll be a fan of you lol.

EDIT: @LTN Games @Joy Diamond
i found some interesting thing here
https://chrome.google.com/webstore/detail/devtools-theme-zero-dark/bomhdjeadceaggdgfoefmpeafkjhegbo

its can bee cool experimente with add chrome flags in the package.json from rmmv dir

#enable-devtools-experiments

if one of you get this work, plz tell me !
https://github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme

or good info here
http://www.hongkiat.com/blog/chrome-devtools-theme/

 

[Jonforum]

so logically it would be enough like that.
if according to the flag list available here.
https://peter.sh/experiments/chromium-command-line-switches/

"from \C:\Program Files (x86)\KADOKAWA\RPGMV\nwjs-win\package.json"

from this stage, I stuck, someone has an idea plz?
maybe @Liquidize can help ?

where copy this source in rmmv folder ?
https://github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme

 

[LTN Games]

I can't test it right now but it looks like you would just include the css file here, I assume copy to the root directory with the index.html then run this code somewhere in one of your plugins or in a script tag in the index.html

var xhr = new XMLHttpRequest(),
    stylesheet = 'stable.css';

if (/Chrome\/(\d\d)/.exec(navigator.userAgent)[1] > 43) {
    stylesheet = 'canary.css';
}

xhr.open("GET", "/" + stylesheet, false);
xhr.send();
chrome.devtools.panels.applyStyleSheet(xhr.responseText);

I can't be sure but it looks promising lol It may be a bit different where it nwjs though, worth a try.

Edit: You may want to include the canary.css as well

 

[Joy Diamond]

I can't test it right now but it looks like you would just include the css file here, I assume copy to the root directory with the index.html then run this code somewhere in one of your plugins or in a script tag in the index.html

chrome.devtools.panels.applyStyleSheet(xhr.responseText);

This won't work as there is no chrome.devtools in the build that comes with RPG Maker MV:

Spoiler: Picture showing no chrome.devtools available by default

Again, we could install that extension ... however, I don't think we can ask normal users to do that.

Also regarding using console.group, etc, to reproduce a new tree with colors, which is eminently doable ... the problem is you can't reproduce clickable links that way. In particular:

Spoiler: Picture showing very nice clickable links in Developer Tools

You will gain colors, but lose clickable links ... I don't think this is a good trade off.

 

[Jonforum]

I can't test it right now but it looks like you would just include the css file here, I assume copy to the root directory with the index.html then run this code somewhere in one of your plugins or in a script tag in the index.html

var xhr = new XMLHttpRequest(),
    stylesheet = 'stable.css';

if (/Chrome\/(\d\d)/.exec(navigator.userAgent)[1] > 43) {
    stylesheet = 'canary.css';
}

xhr.open("GET", "/" + stylesheet, false);
xhr.send();
chrome.devtools.panels.applyStyleSheet(xhr.responseText);

I can't be sure but it looks promising lol It may be a bit different where it nwjs though, worth a try.

Edit: You may want to include the canary.css as well

thank i take i look this to nigth, and give you new

 

[LTN Games]

@Joy Diamond Yea, clickable links is important, but at the same time, we can still log the original object after the grouped styled logs and just have inside one group, the original object with clickable links and the iterated object logs with styles.
As for not having the chrome object, I didn't think there would be but nwjs does provide ways to access a devtools window.
@Jonforum I would recommend taking a look at this GitHub issue discussing possible ways to style the dev tools. This combined with the above CSS styles I think you can figure something out.

P.S Where there is a will, there is a way I love thinking outside the box

 

[Joy Diamond]

Greetings,

I would like to share some information to anyone who is thinking of trying to modify Developer Tools:

Another big change is the Developer Tools, which is way superior in RPG Maker MV 1.6.0 (i.e.: from the upgrade of nw.js from 0.12.3 to 0.25.4):

Spoiler: Pictures of different versions of nw.js in RPG Maker 1.5.1 .vs. RPG Maker 1.6.

View attachment 77333

View attachment 77334

When changing from nw.js 0.12 to 0.13, there was major changes in how Developer Tools interacts with nw.js:

• Thus what works in RPG Maker MV 1.5.1, in modifying Developer Tools (i.e.: adding extensions) will not work in RPG Maker MV Beta 1.6.0

• A lot of links on the internet, are for nw.js before 0.13 -- thus what they say will not work with nw.js after version 0.13. Be careful you do not waste your time in solutions that will not work in the future.

In other words, you might have to do your work twice .... which is a major reason I decided to avoid trying to modify how Developer Tools works ...​

Sincerely,

Joy Diamond

For one example of how different this is just consider nw.js official documentation on win.showDevTools()

• Even bringing up Developer Tools from JavaScript has significantly changed.
• Equally important is that in nw.js 0.12 you could get easily a handle to the DevTools Window; I know of no way to get a handle to the DevTools window in 0.13 or later (at least without adding extensions to nw.js like chrome.devtools)

P.P.S.: If you still want to solve this, I suggest solving it only for RPG Maker MV Beta 1.6.0 & later versions. Better than solving it twice ...

 

[Jonforum]

I confirm that this is not possible in the current version .1.5.1
it seems missing the module extention in nwjs-

logicly , with this line we suppose to have acces to the experiments feature in the devtool.

"chromium-args" : "--auto-open-devtools-for-tabs --enable-devtools-experiments --load-extension=react-devtools

hope will avaible with the v1.6 rmmv
i also see the command
--devtools-flags ⊗ Passes command line parameters to the DevTools front-end.
but I have no idea how to use it
i hope the new node in rmmv v1.6 will allow devtools-experiments module !

 

[Joy Diamond]

For an example of using console.log with colors please see:

• Silver: Show Important Local Variables, Extensible Research

Spoiler: Initial Output.

View attachment 77410

Spoiler: Here is the same output after clicking on the arrows to open them up.

View attachment 77411

 

[Jonforum]

For an example of using console.log with colors please see:

• Silver: Show Important Local Variables, Extensible Research

Spoiler: Initial Output.

View attachment 77410

Spoiler: Here is the same output after clicking on the arrows to open them up.

View attachment 77411

yes i know css custom consol.log
very userfull for debug a lot complex code.
but you need to make a custom library and add it to eatch consol.log.

    var cl= [ // custom css for consol log ex: cl[2]
    ['background: linear-gradient(#008000, #004000)', 'border: 2px solid #323335', 'color: white', 'display: block', 'line-height: 16px', 'font-weight: bold'
    ].join(';'),
    ['background: linear-gradient(#c91919, #6d0c0c)', 'border: 2px solid #323335', 'color: white', 'display: block', 'line-height: 16px', 'font-weight: bold'
    ].join(';'),
    ['background: linear-gradient(#ffa500 , #6B4500)', 'border: 2px solid #323335', 'color: white', 'display: block', 'line-height: 16px', 'font-weight: bold'
    ].join(';'),
    ['background: linear-gradient(#404040 , #191919)', 'border: 2px solid #323335', 'color: white', 'display: block', 'line-height: 16px', 'font-weight: bold'
    ].join(';'),
    ];

with my keyboard macro key (sprot Cahlenger prime)

it allow me to put some macro auto key for consol.log, tha make easy code life.
The plugin on visual studio code for easy consol.log no work with custom css, (ctrl+shift+L)

but I am particularly interested in the customization of devtool
all the tips and trick are welcome.
thanks

 

[Joy Diamond]

@Jonforum

• It would be great if they added Chrome Development tools to a release.

• However, considering that RPG Maker MV 1.6.0 is in Beta now, it is probably quite too late & too risky to add it to 1.6.0 ("Beta" normally means all features are frozen & nothing new is added before release).

A better strategy is probably to request they add to the next version.​

 

[Jonforum]

ok solved with 1.6
Finally a Theme syntaxe!

 

[Kes]

[closed]IgnoreMe[/closed]