Drupal 7 website layout/styling breaks all a sudden (random), how to debug? there are no logs One of my websites running Drupal 7 goes out of format, most often when user login.



This is how it should be 

After running out of format this how it looks

This may be a CSS issue, it may be a caching issue, or it may be something else. As I know Drupal core code is almost perfect but contributed, custom modules and themes can spoil something by adding bad code.

After spending sometime doing research I come across many question and answer which were not that clear at all because there are many factors that can cause such a problem therefore it is really hard to say what is happening specially in some cases when there is no sign of error or warning.

For example in my case I am using Drupal7, Superfish menu  and following modules

addressfield, addressfield_staticmap, admin_views, ajax_register, auto_nodetitle, autoassignrole, backup_migrate, captcha, ckeditor, colorbox, content_access, css_injector, ctools, currency, custom_search, date, entity, entity_translation, faq, field_collection, field_permissions, field_slideshow, flexslider, flood_unblock, follow, galleria, gmap, google_analytics, i18n, i18nviews, image_captcha_refresh, jquery_update, l10n_update, lang_dropdown, languageicons, libraries, link, Location, login_destination, markup, menu_block, mlpanels, modal_forms, money, mortgage_calculator, page_manager_redirect, panels, pathauto, real_estate, realname, rules, select_translation, serial, simple_fb_connect, simple_gmp, simpleads, simplify, smart_ip, social_share, superfish, tablefield, tabtamer, taxonomy_acces, taxonomy_acces_fix, taxonomy_csv, token, translation_overview, unique_field, user_role_field, variable, viewfield, view, view_bulk_operation, views_content_cache, views_data_export, views_field, views_horizontal_slider, views_jqfx, views_jqfx_Cycle, views_php, view_Slideshow, views_slideshow_galleria, workspace, wysiwyg

The website is hosted in Cpanel 

Itry may options to look for the error and identify the problem which where not helpful at all, I tried Mozilla browser and Firebug and there is no error or warning at all. I tried to add parameters into setting.php 

error_reporting(-1); 
$conf['error_level'] = 2; 
ini_set('display_errors', TRUE); 
ini_set('display_startup_errors', TRUE);


And still nothing changed. finally I decided to post the question here and ask all the great and genius developer to post their view and solution on:


What can cause a Drupal website to run out of format and broke the layout
What are the available tools or option that we can use to debug a Drupal


Can anyone please explain how to debug Drupal and deal with theme issue  in a step-by-step way to make it simpler for everybody?
Above all, I assume that you have Google Analytics Installed. Go to the Behaviours menu and from there look at Site Speed and Page Timings to see how much times it takes to load a page. Use the Speed Suggestion option to allow Google suggest you a number of fixes/tricks that can potentially improve the performance of your web page. This is very handy. 

This is clearly a problem of CSS. Open your site in chrome, enable the development tool F12 and then keep refreshing and monitor Network and Console windows. I observed that every reload of the page causes a request to a CSS to break (hence the resource is never downloaded - each time a different CSS from a different module). 

It would be a great idea if you could give this module a go https://www.drupal.org/project/advagg, I highly recommend that you aggregate all your site's CSS into few or single CSS file. 

It is always better to download one slighty larger file than make over a hundred calls to a web server requesting for tiny tiny CSS files, because there is high chance that your request fail or die (to to waiting). 

I will update my answer with more findings but, give that module and a go and let us know your findings.