Sublime Web Inspector — Debug JavaScript in SublimeText

  • Set and remove breakpoints right in SublimeText
  • See all console messages with level
  • See object properties
  • See a stack and all variables (local, global, closure)
  • Evaluate selection on current call frame
  • Live reload

Sublime Web Inspector →

Firefox CSS live editing via SublimeText

A lot of editors are scriptable in Python. And Firefox has remote capabilities. So we are building a python library that can be used by editors to interact with Firefox (desktop or mobile). We could for example add JS breakpoints from Vim, or edit the code of the current page from SublimeText.

Note that the page isn’t being reloaded but the changes are being transferred via the Dev Tools Protocol to Firefox which updates the CSS as if you’d change it via Firebug/the Dev Tools themselves.

FldgNq0

Firefox CSS live editing, and a truckload of other new features — such a built-in jsfiddle/jsbin — are being planned for the next iteration of the Firefox Dev Tools.

Coding in the browser & controlling the browser from editors/IDEs →

Sublime Text Markdown Syntax Highlighting

Instructions for use with SublimeText3 in the comments below

sublime-markdown

One of the features I find lacking in Sublime Text is the default support for Markdown syntax highlighting. Fortunately Sublime Text can be customized and we can define a color scheme of our own.

To get the results as shown in the screenshot above, edit your theme file (~/Library/Application Support/Sublime Text 2/Packages/Color Scheme - Default/Monokai.tmTheme) and paste in the code below (which is inspired upon this gist) just before the </array>

<dict>
	<key>name</key>
	<string>Markdown: Linebreak</string>
	<key>scope</key>
	<string>text.html.markdown meta.dummy.line-break</string>
	<key>settings</key>
	<dict>
		<key>background</key>
		<string>#A57706</string>
		<key>foreground</key>
		<string>#E0EDDD</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markdown: Raw</string>
	<key>scope</key>
	<string>text.html.markdown markup.raw.inline</string>
	<key>settings</key>
	<dict>
		<key>foreground</key>
		<string>#269186</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markdown: Punctuation for Inline Block</string>
	<key>scope</key>
	<string>punctuation.definition.raw.markdown</string>
	<key>settings</key>
	<dict>
		<key>foreground</key>
		<string>#269186</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Heading</string>
	<key>scope</key>
	<string>markup.heading</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string>bold</string>
		<key>foreground</key>
		<string>#cb4b16</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Italic</string>
	<key>scope</key>
	<string>markup.italic</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string>italic</string>
		<key>foreground</key>
		<string>#839496</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Bold</string>
	<key>scope</key>
	<string>markup.bold</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string>bold</string>
		<key>foreground</key>
		<string>#586e75</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markdown: Punctuation for Bold, Italic</string>
	<key>scope</key>
	<string>punctuation.definition.bold.markdown, punctuation.definition.italic.markdown</string>
	<key>settings</key>
	<dict>
		<key>foreground</key>
		<string>#586e75</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Underline</string>
	<key>scope</key>
	<string>markup.underline</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string>underline</string>
		<key>foreground</key>
		<string>#839496</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Quote</string>
	<key>scope</key>
	<string>markup.quote</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string>italic</string>
		<key>foreground</key>
		<string>#268bd2</string>
	</dict>
</dict>
<dict>
	<key>name</key>
	<string>Markup: Separator</string>
	<key>scope</key>
	<string>meta.separator</string>
	<key>settings</key>
	<dict>
		<key>background</key>
		<string>#eee8d5</string>
		<key>fontStyle</key>
		<string>bold</string>
		<key>foreground</key>
		<string>#268bd2</string>
	</dict>
</dict>

Once you’ve saved the theme you should get the same results as seen in the screenshot above (no need for a restart) when viewing markdown files

Whilst you are at it you can also install Markdown Preview which lets you preview your files in the browser (and thus convert it to HTML)