Context

Working on a new project of mine, I wanted to modify CSS in real-time with Codekit. I’ve been using CodeKit since January-ish of ‘012 Beta and have always been a big fan of it.

Below is a helpful video from CodeKit on how to set that up.

Great! Let’s get started coding…oh no.

The Problem

Self-signing certificates in Google Chrome? Nah. I love using Chrome for its Developer Tools. That would be perfect and helpful for this situation.

Chrome displays this error:

The site can’t provide a secure connection
_______.local doesn’t adhere to security standardsERR_SSL_SERVER_CERT_BAD_FORMAT

( I just wanted to try the blur feature in CloudApp… )

Codekit has TLS Support. One would think the following image would work? Nope.

Just to be clear, I’m using Google Chrome Version 59.0.3071.115 (Official Build) (64-bit) on macOS Sierra 10.12.5.

Your mileage may vary.

The Solution? Troubleshooting.

Chrome

In the address bar in Chrome:

chrome://flags/#allow-insecure-localhost

In theory, that should work yet it doesn’t.

Let’s go to settings, so in Chrome:

chrome://settings/

Click on Advanced at the bottom.

Find manage certificates. This is where you used to be able to set an exception. Oh wait, look it directs you to the Mac Keychain and you have to find an unknown certificate…

Knowing it’s CodeKit, I find the certificate. Click on the CodeKit Temp Certificate, then click on the i button at the bottom of the window. Click on Trust to expand its pane. Let’s set every drop-down menu to Always Trust.

Great, go back to Chrome. Refresh. Relaunch from CodeKit. Shake laptop angrily. Does it work? Nope.

Hmm. Okay. Try it in Chrome Canary? Doesn’t work.

Okay.

Go back to Developer Tools, hit the Security tab. It says that the certificate is valid!