Using Google Chrome to debug and edit jQuery directly in browser

This post belongs to Siebel Open UI tools, means a step ahead for all Open UI developers to get their things done despite of hell of limitations..

Scenario: 

Its a possible case that yours local set up of Siebel 8.1.1.11 got corrupted while you have to fix some issue on server…

OR

Some objects like virtual Business Components not working on your local while things have been done on server, now you to make some Open UI changes i.e. Jquery changes…

Problem:

In both cases, you have no other option than only to listen your bosss…” What the hell are you doing, mann ??”

Solution:

Lets start with pretty basic concept, do you guys know that we can see our PM-PR files in chrome debugg mode (here I m talking about chrome only).

• Do Inspect element,
• Go to Sources tab
• Go to scripts/public/siebel
• You can see all your jQuery files here, select a file to see in details

 

Now, the point is Is it possible to live edit this file and compile to see our changes in browser directly ??

sounds good. 🙂 ..if we can do this then we can live edit a PM/PR file and fix any issue without any local setup.

Lets go step by step…

Step 1: Do Inspect Element, go to Source tab

[su_lightbox type=”image” src=”http://askmesiebel.com/wp-content/uploads/2014/06/live_edit1.jpg”]

[/su_lightbox]

Step 2: Go to path, select your file to see in details

[su_lightbox type=”image” src=”http://askmesiebel.com/wp-content/uploads/2014/06/live_edit2.jpg”]

[/su_lightbox]
Step 3: Make your changes, do Ctrl + S and see yellow symbol to confirm your change

[su_lightbox type=”image” src=”http://askmesiebel.com/wp-content/uploads/2014/06/live_edit3.jpg”]

[/su_lightbox]
Step 4: Go to console and check for this message to confirm compilation

[su_lightbox type=”image” src=”http://askmesiebel.com/wp-content/uploads/2014/06/live_edit4.jpg”]

[/su_lightbox]

 

Guys, this really helps me. Hope it will help you as well.

[su_divider]

@AskmeSiebel