Joshua Pekera joshuapekera

Safari 6 revert to WebKit Web Inspector

When Mountain Lion and Safari 6 were released most Web-developers I know complained about the new Web Inspector, which is updated to resemble Xcode a bit more. The people complained and soon other people suggested to use Chrome or the Nightly WebKit build instead, because it still provides the WebKit Web Inspector.

These are all valid options but it doesn't feel the same. I remembered that the Web Inspector itself was written using HTML/CSS/JavaScript so I started to think, could I not simply replace the source files for the Web Inspector? After just a few minutes of playing around I found a way to get Safari to use the WebKit Web Inspector.

In fact, it is an updated version of the WebKit Web Inspector which has some awesome new features (and provides a secret Settings menu which has a few neat things as well) while remaining the old look and feel we've all grown to know and love.

Note Before doing this close Safari, and remember to create backups for everyt

Deploy your site with git

This gist assumes:

you have a local git repo
with an online remote repository (github / bitbucket etc)
and a cloud server (Rackspace cloud / Amazon EC2 etc)
- your (PHP) scripts are served from /var/www/html/
- your webpages are executed by apache
apache's home directory is /var/www/

	CACHE MANIFEST
	#
	# Version Control
	# v0.0.0 00-00-0000
	#
	# Handy Dandy Developer Tools
	# CHROME chrome://appcache-internals
	# FIREFOX about:cache
	# Charles - Web Debugging Proxy App
	# http://charlesproxy.com

	/**
	* The first commented line is your dabblet’s title
	*/

	background: #f06;
	background: linear-gradient(70deg, #f06, yellow);
	min-height: 100%;

	<html>
	<head>
	<style>
	.container {
	font-family: Helvetica;
	font-size: 1.5em;
	}

	.transform {
	-webkit-perspective: 150px;

	<!DOCTYPE html>
	<html>
	<head>
	<title>Missing Page - 404</title>
	<style type="text/css">
	body { color: #fff; text-shadow: 0 1px 2px #000; font-family: "chaparral-pro", 'Helvetica Neue', arial, sans-serif; }
	div.dialog {
	width: 40%;
	padding: 2em;
	margin: 2em auto 0 2em;

	<article class="sandbox">
	<header>
	<h1>Demo of <code>image-set()</code> and <code>srcset</code></h1>
	</header>

	<section class="image-set">

	<h2><code>image-set()</code></h2>

	<!-- 1. normal use case, bg images -->

	/**
	* Unfolding map
	*/
	html {
	min-height: 100%;
	background: linear-gradient(top, #ccc, #f6f6f6);
	}
	.map {
	animation-name: unfold;
	height: 400px;

	# Font Squirrel Font-face Generator Configuration File
	# Upload this file to the generator to recreate the settings
	# you used to create these fonts.

	{"mode":"expert","formats":["ttf","woff","eot","svg"],"tt_instructor":"default","options_subset":"advanced","subset_custom":"","subset_custom_range":"f000-f073,f200-f273","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0","rememberme":"Y"}