Doors Next Generation Extensions: Start with the Chrome Developer Tools

After the successful “deploy” of our first DNG Extension, it is time to start Chrome Web Browser. Included in the Chrome Browser are the Developer Tools. You find them at the Chrome menu “Tools->Developer Tools” or “Ctrl + Shift + I” on windows. Safari and Firefox has similar Debugger/Tools but I prefer Chrome.

Bildschirmfoto 2014-03-02 um 13.55.04

With the Chrome Developer Tools we could avoid the “turnaround” like in the good old development times….

  1. Change the html file with an IDE/Editor.
  2. Save/copy the file. Start/restart the browser and reload the html file.
  3. When something goes wrong then we had to go back to the Editor. Boring!

Just do check if our DNG Extension was loaded…goto “Source” Tab and open the Navigator (top left). You should see your Javascript “status.js” inside the “link_explorer” folder. Details at the screenshoot above.

Open the status.js file and you will see the code inside the Developer Tools.

Bildschirmfoto 2014-03-02 um 14.49.56

The really cool thing is…we can change the content of status.js! Change “RM.Event.subscribe” like this (just insert the console.log command):

RM.Event.subscribe(RM.Event.ARTIFACT_OPENED, function(ref) {
    console.log("Inside Event");
    checkFormatAndProceed(ref);
}

Use the right mouse button to get the context menu and save the file to your hard disk.

Bildschirmfoto 2014-03-02 um 15.02.22

With this step it is just a local change and will not alter your status.js file on the server. If you want you can remove your changes later. Now every time a DNG artefact is opened the event trigger our anonymous function and we should see the message “Inside Event” on the console. Open the “Console” Tab to see the result.

Bildschirmfoto 2014-03-02 um 15.00.19

In the next Post we will use the Chrome Debugger more in detail…stay tuned.

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: