Since latest updates, Photoshop (and possibly other Adobe apps too) need remote connecting for debugging HTML Extensions - here’s a quick how-to.
In 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
Now, 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.
The Photoshop HTML Panels Development Course
If you’re reading here, you might be interested in my Photoshop Panels development – so let me inform you that I’ve authored a full course:
- 300 pages PDF
- 3 hours of HD screencasts
- 28 custom Panels with commented code
Check it out! Please help me spread the news – I’ll be able to keep producing more exclusive content on this blog. Thank you!