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

Status
Not open for further replies.

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
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?
debug-color-console-obj.jpg
 

Joy Diamond

Talkative
Veteran
Joined
Nov 12, 2017
Messages
135
Reaction score
174
First Language
English
Primarily Uses
RMMV
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

Indie Studio
Veteran
Joined
Jun 25, 2015
Messages
708
Reaction score
636
First Language
English
Primarily Uses
RMMV
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

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
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:
PHP:
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.
see plugin

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

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
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
PHP:
#enable-devtools-experiments
if one of you get this work, plz tell me !
https://github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme
9AoG5VE-LaEdjCTb8347q_UwiRWXT500sCv_V_t2pnwMHsGGcoDl24CCwXe9bnzZksztQSpgh8Y=w640-h400-e365


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

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
Last edited:

LTN Games

Indie Studio
Veteran
Joined
Jun 25, 2015
Messages
708
Reaction score
636
First Language
English
Primarily Uses
RMMV
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
PHP:
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

Talkative
Veteran
Joined
Nov 12, 2017
Messages
135
Reaction score
174
First Language
English
Primarily Uses
RMMV
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
Code:
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:

upload_2017-12-2_19-6-19.png

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:

upload_2017-12-2_19-11-3.png

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

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
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
PHP:
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

Indie Studio
Veteran
Joined
Jun 25, 2015
Messages
708
Reaction score
636
First Language
English
Primarily Uses
RMMV
@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 :D
 

Joy Diamond

Talkative
Veteran
Joined
Nov 12, 2017
Messages
135
Reaction score
174
First Language
English
Primarily Uses
RMMV
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):
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

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
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.
PHP:
"chromium-args" : "--auto-open-devtools-for-tabs --enable-devtools-experiments --load-extension=react-devtools
dJoBc.png



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 !
;_;
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
For an example of using console.log with colors please see:

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.
PHP:
    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)
maxresdefault.jpg

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

Talkative
Veteran
Joined
Nov 12, 2017
Messages
135
Reaction score
174
First Language
English
Primarily Uses
RMMV
@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

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,634
Reaction score
1,452
First Language
French
Primarily Uses
RMMV
ok solved with 1.6 :rock-left::rock-left::rock-left::rock-left::rock-left::rock-left::rock-left::rock-left::rock-left::o
Finally a Theme syntaxe!
Sans-titre-1.jpg
 
Status
Not open for further replies.

Latest Threads

Latest Profile Posts

Two NPCs blinking animations in VNMaker and two to go. Some progress!
Fun Fact: My last two projects (Fursona and A Postmortem Nation) were released before I could do post-completion playtesting because I got so excited and happy I released them on the spot. Sometimes I have rubbish impulse control. smh
Circle, circle, dot, dot... I got my first COVID shot! And I barely felt it, which shocked me. Usually having Autism causes my sense of touch to be amplified! I go for my second dose in June.
Another update, this time on moving. I got the keys to my apartment today, but it was poorly cleaned/repaired. They're working on it, don't worry!
:kaojoy:I just saw 2 players reached 10 hours.
The game is totally not for cult recruitment. As of yet, we have not summoned Cthulhu.
Unfortunately, besides that, many issues still need to be fixed for more common fellows.
To at least pretend everything is normal here. :kaoswt2:

Forum statistics

Threads
111,308
Messages
1,060,084
Members
144,629
Latest member
petebooh
Top