Link to home
Start Free TrialLog in
Avatar of John H
John HFlag for United States of America

asked on

How do I step through page code and see what a page renders for each line/element?

Afternoon all,

Google Pagespeed Insights is showing an element on my website (www.recoveryaudio.org) that is blocking the above-the fold rendering.  You can see the rendering issue when viewing via mobile device.

Is there a utility out there that will allow me to step through/execute the code line by line so i can see how the page renders as i step through the code?

I'm no developer - but a decent tinkerer and can setup a mamp server if it is the best debugging environment.

Thank you!
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of John H

ASKER

I was tinkering with the Autoptomize Plugin and was finding (i believe) that some .js settings rendered a big blue space above the fold on mobile screens - pagespeed test caught that.  I just had to keep playing with the Autoptimize settings and files to exclude 1 js file from optimization, then it  loaded the child theme cleanly (understand - i know very little about web development and don't even know how to add a hook other than copy/paste from what i find on the web).

I checked out phpstorm and think i want to dork around with it, sounds like good tinkering education.  Site gets 2000/day, but there's still room to make google more happy and max out the keyword rankings

Thank you all who responded!