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!
John HGeneral TinkererAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Even if there was it would not help you as the blocking is most likely due to the loading / running of an external resource which is being downloaded asynchronously. By stopping processing to step through the code is just going to alter the results you get.

A better option is to use the browser developer tools Network Tab (F12). Load the page with this view open and look at what resource is taking its time to load.
0
James RodgersWeb Applications DeveloperCommented:
when you run googlepagespeed and it mentions render blocking code, there is sometoimes a link  given, see differences or something, click on the link and you should see the image on the right-hand side of the page change to show the differences, this can help identify what is affected and you can change the way the css is implemented to correct the issue
0
Steve BinkCommented:
it looks like you're using Wordpress, so you'll need an IDE which handles PHP.  PHPStorm is a very good editor which uses PHP's xdebug module to do just that.

If you can't get live debug running, you could also use some code tracing to get the same information.  For example, if you find where Wordpress is creating/rendering the header, you can insert a line of code which prints the rendered content to your error log.  Then you render the page and check the log to see what happened.  It is a little more clumsy and time consuming, but can yield the information you want if you have enough tinkering patience.

Aside from that, I looked at your site on desktop, and in "mobile mode" using dev tools, and did not see anything obvious.  What exactly are you referring to when you say "blocking"?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
John HGeneral TinkererAuthor Commented:
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!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.