diff --git a/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/breakpoints.jpg b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/breakpoints.jpg new file mode 100644 index 0000000..927ac48 Binary files /dev/null and b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/breakpoints.jpg differ diff --git a/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/initial-pause.jpg b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/initial-pause.jpg new file mode 100644 index 0000000..837dce5 Binary files /dev/null and b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/initial-pause.jpg differ diff --git a/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/propset-console.jpg b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/propset-console.jpg new file mode 100644 index 0000000..7802ab0 Binary files /dev/null and b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/propset-console.jpg differ diff --git a/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/propset-inline.jpg b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/propset-inline.jpg new file mode 100644 index 0000000..27fa4be Binary files /dev/null and b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/propset-inline.jpg differ diff --git a/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/python.jpg b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/python.jpg new file mode 100644 index 0000000..25b33e5 Binary files /dev/null and b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/python.jpg differ diff --git a/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/stack-jumping.jpg b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/stack-jumping.jpg new file mode 100644 index 0000000..1a5f0c6 Binary files /dev/null and b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/stack-jumping.jpg differ diff --git a/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/waiting-to-debug.jpg b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/waiting-to-debug.jpg new file mode 100644 index 0000000..ad9bd57 Binary files /dev/null and b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/waiting-to-debug.jpg differ diff --git a/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/watch-expressions.jpg b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/watch-expressions.jpg new file mode 100644 index 0000000..4241a07 Binary files /dev/null and b/blog-data/2013-05-16-ti-debug-for-debugging-server-code-in-the-browser/watch-expressions.jpg differ diff --git a/blog/_posts/2013-05-16-ti-debug-a-browser-debugger-for-server-code.md b/blog/_posts/2013-05-16-ti-debug-a-browser-debugger-for-server-code.md new file mode 100644 index 0000000..098fe86 --- /dev/null +++ b/blog/_posts/2013-05-16-ti-debug-a-browser-debugger-for-server-code.md @@ -0,0 +1,78 @@ +--- +title: "ti-debug: For Debugging Server Code in the Browser" +layout: post +tags: node xdebug webkit +description: Making it easier to debug languages like PHP and Python with only a browser. +--- + +I find that I am rarely using full IDEs to write code (e.g. [Eclipse][1], [Komodo][6], [NetBeans][3], [Zend Studio][2]). +They tend to be a bit sluggish when working with larger projects, so I favor simplistic editors like [Coda][4] or the +always-faithful [vim][5]. One thing I miss about using full-featured IDEs is their debugging capabilities. They usually +have convenient debugger interfaces that allow stepping through runtime code to investigate bugs. + +About a year ago I started a project called [ti-debug][7] with the goal of being able to debug my server-side code (like +[PHP][8]) through [WebKit][13]'s developer tools interface. After getting a functional prototype of it working, I got +distracted with other projects and it dropped lower in the list of my repository activities. That is, until a few weeks +ago when [David][9] from [CityIndex][10] expressed interest in the project. I've been able to spend some sponsored time +in order to finish some of the features, update dependencies, and create a more stable project. + + +### Functionality + +If you're familiar with the WebKit developer tools (also found in [Google Chrome][11]), the interface should look +extremely familiar. The core of `ti-debug` is written in [node.js][12] and when started up, it creates a simple web +server for you to open a browser tab and connect to. While you develop in other tabs, it will wait until there is an +incoming debug session at which point it loads up the debug environment and waits for you to step through code. + +Screenshot: waiting for connection +Screenshot: waiting for interaction + +The full stack trace is available along with all the local and global variables. In addition to the basic step +over/into/out, breakpoints can be set throughout the code. When paused, variables can be inspected and explored. In +addition to simple types like strings and booleans, complex objects and arrays can be expanded and further explored. + +Screenshot: breakpoint exploration + +Not only can variables be read, they can also be updated inline by double clicking and entering new values. Or, for more +advanced commands, the console can be used to evaluate application code, possibly updating the runtime. + +Screenshot: waiting for connection +Screenshot: waiting for interaction + +Like most other IDE debuggers, the frontend supports jumping through the various levels in the stack to inspect the +runtime and run arbitrary commands. One other minor feature is watch expressions which are evaulated during every pause. + +Screenshot: waiting for connection +Screenshot: waiting for interaction + +Once a debug session has completed, the debug tab gets redirected back to the waiting page. Or, if the debug tab gets +closed in the middle of the debug session, the debugger will detach from the program and let it run to completion. + +PHP isn't the only supported language. By using the debugging modules from [Komodo][14], other languages using the DBGp +communication can also use `ti-debug`. For example, Python scripts can currently be debugged, too... + +Screenshot: breakpoint exploration + + +### Workflow + +One of the ways that `ti-debug` can be run is locally for a single developer, but in the case of DBGp, `ti-debug` can +also act as a proxy to support multiple developers, or a combination of developers wanting to use both the browser-based +debugger along with their own local IDEs. This way, `ti-debug` could be running on a central development server to allow +all developers access. + + + [1]: http://www.eclipse.org/ + [2]: http://www.zend.com/products/studio/ + [3]: https://netbeans.org/ + [4]: http://panic.com/coda/ + [5]: http://www.vim.org/ + [6]: http://www.activestate.com/komodo-ide + [7]: https://github.com/dpb587/ti-debug + [8]: http://php.net/ + [9]: https://github.com/mrdavidlaing + [10]: https://github.com/cityindex + [11]: https://www.google.com/intl/en/chrome/browser/ + [12]: http://nodejs.org/ + [13]: http://www.webkit.org/ + [14]: http://code.activestate.com/komodo/remotedebugging/