How To: Debugging Kinetic (Browser)

Yes the parameter is there, it is also part of the sample request in swagger.
It should be part of the payload in the browser.

I know the parameter is there, but I don’t see the value in the payload… Do you?

-Utah

1 Like

@Jonathan

This is what happens when I try to filter for that parameter (nothing).

When I filter for any of the other four I see them come up.

Not sure how the Filter works, maybe can only work in top level nodes/messages. But the search works fine.

Thank you, I was looking for it in the dataviews which is why I couldn’t find it.

You found it in the action.

thanks for taking the time to look at this!

@hmwillett you rock, thanks for making this post!

1 Like

I didn’t realize you already wrote this up, saw it as I was replying to another thread.

In addition to the Browser Debug, here is additional Client-Side Info, for the sake of information.

If you are using Epicor Client

You can visit this url in the browser http://localhost:1234/ and get to Chrome Remote Debugging Tools.

You can also enable some text file logging as well as change the Remote Debugging port by adding the following to your client .sysconfig under <userSettings>

    <EOBrowser>
      <RemoteDebugPort value="9876" /> <!-- set custom port if you have issues with 1234 -->
      <LogEnabled value="true" bool="" />
      <LogPath value="C:\epicor\debug\foldertologto" />
      <!-- <ExtraCommandLines value="--disable-image-loading" /> -->
    </EOBrowser>

You can also launch a Dev Console during Start by adding the following to <userSettings>

<LaunchEOBrowserDebug value="True" />

I also believe you can click F12 while in a Kinetic Screen including iDP Client.

If you want to Enable Debug Mode for everyone

Not sure why you would, but you can also add additional flags to your sysconfig.json

2 Likes

@hmwillett have you seen this new Debug Panel which populates with data when in debug mode?


Yeah, I was playing with that in the CR. It was “meh”. Nice for folks debugging through the client, but I 100% prefer Dev tools in the browser.

2 Likes

For sure it doesnt give enough info, you can’t drill down into an object. I am not sure why they are reinventing the wheel when all browsers come with a nice Dev Tools.

Perhaps without cluttering the ERP, a DevTools plugin can be made which shows overlays among other things, for debugging like a pro!

image
image

React Dev Tools
image

I would love to see also a placeyourstyleshere.css where anyone can theme a bit their css or customjavascript.js that epicor pre-loads. :slight_smile:

Also some ability to generate map files for your custom elements that you can step into via JS debugger.

They probably dont even have to reinvent that either, can just fork Angular Tools that exist.

image
image
image
image

@bconner have you guys considered it? Its much easier for you with the source code to write additional hooks to talk to plugins. :slight_smile:

3 Likes

That would be amazing!!! Can someone (@hmwillett?!!) figure this out? Not having themes in the Kinetic UI is a huge step back for the multi-company users out there.

Because it’s not really for users like you all at present - the feature is for less sophisticated users who are overwhelmed by a full dev tools experience and can’t tell the difference between things they can change via studio and the rest of the code running easily enough. That’s why this panel exists, really.

We could produce a browser devtools addin, but then it’d be limited by browser and less accessible to our power user type users who are doing light customization. There would be other things you can only do that way that might be beneficial, but my current direction for it is to extend what we can do in the panel over time.

3 Likes

If you all want to do that we can’t actually stop you fwiw because it’s browser tech you can use browser plugins to inject things - greasemonkey, etc will let you do those kind of overrides. We’re just not adding these things to the core product unless there is a reliable way to make them secure and accessibility friendly.

5 Likes

Thank you for the elaboration. As far as the injection, I see all other SaaS tools do it without a problem. Wordpress, Service-Now, Ghost Blog… Of course the idea isn’t to code in it but lets say if you want you could make a client side js helper function that you can just invoke in your AppStudio. Minor CSS tweaks, or color adjustments.

But you are also right that, there is Stylebot and various other Extensions that allow you to inject your own global-level additional js to a page. If you are a company you can push out extensions and manage the Chrome browser via Active Directory Policies, or other tools. You could also build your own Elektron or CEFSharp browser and inject code and continue to use that as your Epicor WebHost to control some things. You could modify EssentialObjects run arguments etc…

I agree with you on the Dev Tools. We keep forgetting that Epicor considers Customizations just Customizations, most of us have literally turned Customizations into a full-fledged SDK tool without using the SDK (that speaks to your hard work of the Smart Client Architecture, badass!). I guess one could argue, if you really have such Advanced Customizations, get the SDK tools.

Fun Fact: We are licensed for the SDK and I never had a reason to use it :smiley:

1 Like

@hmwillett What are your keyboard shortcuts mapped to? I can’t find anything mapped to those key combinations in Edge or Chromium. Specifically Ctrl+Alt+8 and Ctrl+Alt+V. Ctrl+Alt+1 or 2 or L either.

Note, I’ve found that none of these work in dashboards in 2021.2

@hmwillett Is there anyplace that show Method Directives (and Data Directives) being called ?
(not the Methods themselves but any Directives we have created)

For the method directives, you can see the data going into, and out of the method
directives being called. Anything else you’ll either have to find a log for (if it’s logged),
or log it yourself.

For data directives, as far as I know, unless it’s buried in a log somewhere, you are
on your own.

@klincecum … I’m not seeing it, would you mind screen snapshotting an example to I can get a better understanding ?

thx

Press F12 in the browser on the Kinetic Screen, go to network tab.
Open an app or do some actions.

You’ll see something like this:

ok, yeah, I was seeing that, however I did not see the “payload” and “response” tabs,
those make the input and output of the METHOD more clear

you had said:
“For the method directives, you can see the data going into, and out of the method
directives being called. Anything else you’ll either have to find a log for (if it’s logged),
or log it yourself.”

But isn’t it really a combination data going into and out of both the Method call and the combination of all directives attached to that method ?

I was really liking the info F12 was providing for the events and REST calls, so I guess I came expect it would also show the directive’s details, that’s kind of a bummer…maybe in the future