Chrome Debugging Tool

HTML Panels Tips: #1 Debugging

Davide Barranca —  — 8 Comments

Since latest updates, Photoshop (and possibly other Adobe apps too) need remote connecting for debugging HTML Extensions – here’s a quick how-to.

.debug fileIn the root folder of your extension, create a blank .debug file (you may need to make your OS show hidden files – download here an Automator app for OSX that toggles the visibility on/off).

This file needs to be formatted as an XML and should contain information about the ID of your extension, and the host/port (in the range 1024 – 65534) you want to connect through.

In my case the ID is com.example.communication and the port 8088.

localhostNow, while your Photoshop extension is open, point your browser (either Chrome, Safari, Firefox…) to http://localhost:8088 (of course use the port you’ve set in the XML file). You should see something like the screenshot on the left. If you click the index.html link the Chrome Developer Tools or the Safari/Firefox equivalent will open and you’ll be able to inspect your extension like any other webpage on the internet.

Mind you, as far as I know this debug method doesn’t reach the JSX level – it’s just for the HTML panel and its JS; if you’re wondering a debugger; call in the JSX doesn’t fire up ESTK.
Chrome Debugging Tool

Print Friendly, PDF & Email

8 responses to HTML Panels Tips: #1 Debugging

  1. Great article David.
    If your looking for a great article idea…
    “Recreating Configurator Flash Panels to HTML5 in Photoshop CC ‘Next’ ”
    I think you would get many upon many readers given the forthcoming change in Photoshop on June 18, 2014. I would gladly donate via paypal if you could write an article on creating a custom panel in HTML5 step by step.

  2. Christian Magill June 4, 2014 at 9:09 PM

    I’d also be much interested in a tutorial that would take things from start to finish of a simple project. Perhaps a video series.

    • Hi Christian,
      I would rather do that, but alas it would take too much time – which I’m currently not having 🙁
      Besides, things on panels are moving pretty fast, I’m in the process of learning myself. I will try to post here any new finding.
      One thing that I’ve seen is that this kind of stuff is quite “steep” for people (like me) coming from traditional PS Scripting; while web-devs do all sort of magics, as soon as they’ve grasped the basics of CSInterface and the like. Unhappy but fun business anyway 😉

  3. doesnt work for me.. what am i missing?
    i point my browser to the port and nothing happens,, it
    s like the local host isn`t running at all.
    is there any other way to open the debugger?

    Great site! keep on 🙂

    • Hi Nir,
      I’ve updated the .debug file with code targeting other applications as well (ID, AE, IL…). Are you sure you’ve set the correct ID in the .debug (that matches the extension’s one?)
      Also (I’m sure this is already clear) the panel should be open when you check on the debugger 🙂
      Thanks for the kind words!

  4. gr8 stuff. Short, handy but very useful.

    One thing I am worried about the ‘debugging’ is, how can we use ESTK (for jsx debugging) along with this chrome based html-js debugging. If any one has got some clue, I am waiting for it.

    Thank you

    • Thanks Vinay!
      You could use new CEP5 events (from JSX to JS) in order to display stuff in the console – (or BridgeTalk to ESTK some $.writeln) this is what we’re given at the time.


  5. To get a dot in front on of the filename Windows, create an empty text file and name it .debug. – with a dot before AND after “debug”

Leave a Reply

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">