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.
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 standards
Codekit has TLS Support. One would think the following image would work? Nope.
Your mileage may vary.
In the address bar in Chrome:
In theory, that should work yet it doesn’t.
Let’s go to settings, so in Chrome:
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 it’s 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.
Go back to Developer Tools, hit the Security tab. It says that the certificate is valid!
Okay. Going to Google.
Looks like the certificate generated by CodeKit (?) perhaps isn’t encoded properly. Will reach out to Bryan Jones.
It works. You’ll be prompted to download a certificate, it will install in Keychain, and it will work fine.
It works. You just need to add the URL as an exception, and you are good to go.
I recommend using Firefox for this until something can be done with Chrome.
Thanks for reading, it was a journey for me too.