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

Discussion in 'Learning Javascript' started by Jonforum, Nov 30, 2017.

Thread Status:
Not open for further replies.
  1. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    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
     
    #1
    Joy Diamond and LTN Games like this.
  2. Joy Diamond

    Joy Diamond Talkative Veteran

    Messages:
    135
    Likes Received:
    172
    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)
     
    #2
  3. LTN Games

    LTN Games Veteran Veteran

    Messages:
    645
    Likes Received:
    502
    Location:
    Canada
    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.
     
    #3
    Jonforum likes this.
  4. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    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 !
     
    #4
  5. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    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
    [​IMG]

    or good info here
    http://www.hongkiat.com/blog/chrome-devtools-theme/
     
    Last edited: Dec 3, 2017
    #5
  6. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    Last edited: Dec 3, 2017
    #6
  7. LTN Games

    LTN Games Veteran Veteran

    Messages:
    645
    Likes Received:
    502
    Location:
    Canada
    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""/" stylesheetfalse);
    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
     
    #7
    Jonforum likes this.
  8. Joy Diamond

    Joy Diamond Talkative Veteran

    Messages:
    135
    Likes Received:
    172
    First Language:
    English
    Primarily Uses:
    RMMV

    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.
     
    #8
    LTN Games and Jonforum like this.
  9. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    thank i take i look this to nigth, and give you new
     
    #9
    LTN Games likes this.
  10. LTN Games

    LTN Games Veteran Veteran

    Messages:
    645
    Likes Received:
    502
    Location:
    Canada
    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
     
    #10
    Joy Diamond likes this.
  11. Joy Diamond

    Joy Diamond Talkative Veteran

    Messages:
    135
    Likes Received:
    172
    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:

    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 ...
     
    #11
    Jonforum likes this.
  12. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    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
    [​IMG]


    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 !
    ;_;
     
    #12
  13. Joy Diamond

    Joy Diamond Talkative Veteran

    Messages:
    135
    Likes Received:
    172
    First Language:
    English
    Primarily Uses:
    RMMV
    #13
  14. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    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)
    [​IMG]
    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
     
    #14
  15. Joy Diamond

    Joy Diamond Talkative Veteran

    Messages:
    135
    Likes Received:
    172
    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.​
     
    #15
  16. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,594
    Likes Received:
    1,380
    Location:
    Canada / Québec
    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
     
    #16
  17. Kes

    Kes Global Moderators Global Mod

    Messages:
    21,068
    Likes Received:
    10,703
    First Language:
    English
    Primarily Uses:
    RMVXA

    This thread is being closed, due to being solved. If for some reason you would like this thread re-opened, please report this post and leave a message why. Thank you.

     
    #17
Thread Status:
Not open for further replies.

Share This Page