Self-signed SSL certificates not working with MAMP and Chrome

I followed the answers. What worked for me was setting the port number to 443 in the general tab

**NOTE: Since I posted this, Google have acquired the .dev top level domain, so it's not advised to use .dev hostnames for your local development. I use *.dv now. When reading this answer, please replace .dev with .test or something else when recreating the steps in your own project. Use of .local is not advised **

Chrome now requires SSL certificates to use the "Subject Alt Name" (SAN) rather than the old Common Name. This breaks self-signed certs previously generated by MAMP.

Fortunately, the workaround is pretty straightforward.

Here are all the steps from the very first moment of setting a host to be SSL in MAMP Pro. If you previously created SSL certificates in MAMP, then I've found that deleting them and starting again using this method works.

1. Create your hostname, eg. test.dev and select your document root

2. Click the SSL tab, and check the "SSL" box. Make sure you leave the other checkbox "Only allow connections using TLS protocols" unchecked.

3. Click the "Create self signed certificate" button and fill in the popup form with the relevant details. Click "Generate" and save the certificate in /Applications/MAMP/Library/OpenSSL/certs/

4. Save your changes in MAMP, and restart the servers.
5. Click the round arrow button beside "Certificate file" in the MAMP SSL panel (Show in Finder). Double click the .crt file that is highlighted - it should be named like your host, eg. if your host is test.dev then your certificate file will be test.dev.crt. This should open Keychain Access and you should see the new certificate in there.
6. Right click / Control click on the certificate, and choose "Get Info". Click the drop-down triangle beside "Trust"

7. From the "When using this certificate" selector, choose "Always Trust" - every selector should change to show "Always Trust". Close that window. It will ask for your Mac OS system password to make that change. You should see that the certificate icon shows a little blue plus sign icon over it, marking it as trusted.

8. Restart Chrome.
9. Visit your new hostname, and enjoy the green https in the browser bar.

For those that are still having issues, try using port 8890. The default MAMP ssl port is 8890 so visit https://test.dev:8890. Worked for me.

If the solution above doesn't help, go to chrome://flags look for "Allow invalid certificates for resources loaded from localhost" and enable it, restart Chrome and you should be good to go.