CakePHP MAMP mod_rewrite无法正常工作？

Been delving into PHP and the Cake framework recently and trying to set up a new project using Cake 2.4.7 with MAMP on my MacBook.

I want to use the DebugKit plugin, during installation it suggests my mod-rewrite is not configured correctly as none of the DebugKit's styling seems to be loading. I feel like I've tried everything that people are suggesting to get it working but nothing seems to do the trick.

Here is a list of all the things I have found on forums so far and tried, if anyone has anything else I can try I will be very grateful!

1. git clone https://github.com/cakephp/debug_kit.git in app/Plugin directory which created debug_kit

2. added/uncommented CakePlugin::load('DebugKit'); in app/Config/bootstrap.php

3. added Configure::write('debug', 2); in app/Config/core.php

4. removed ?php echo $this->element('sql_dump'); ?> from app/View/Layouts/default.ctp

5. added .htaccess in project root directory:

   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteRule    ^$ app/webroot/    [L]
   RewriteRule    (.*) app/webroot/$1 [L]
   </IfModule>
   

6. checked .htaccess in my app directory:

   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteRule    ^$    webroot/    [L]
   RewriteRule    (.*) webroot/$1    [L]
   </IfModule>
   

7. checked .htaccess in my app/webroot directory:

   <IfModule mod_rewrite.c>
   RewriteEngine On 
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^ index.php [L]
   </IfModule>
   

8. checked output of echo phpinfo(); for mod_rewrite which was present

9. in /Applications/MAMP/conf/apache/httpd.conf replaced all AllowOverride None changed to AllowOverride All for <Directory> directives

10. commented out echo $this->Html->css(array('cake.generic.css')); in case it was getting in the way

And still the debug kit toolbar looks like this: