Drupal 7 website layout/styling breaks all a sudden (random), how to debug? there are no logs

Question

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?

Answer 1

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.

Answer 2

After the user logs in, the menu in the left upper corner appears (appearance to edit shortcuts) Your css is probably reacting to it (relative positioning etc.). For debuigging: Navigate with firebug to the menu's uppermost (most likely with the class user-menu or navigation) Then add in the styles frame in firebug (on the right side) for that class

display: none;

Thats mostly faster for debugging than doing it through your css files. If its the problem change your css files accordingly.

Another often encountered problem is that while using https for certain content (after a user logged in) the same-origin-policy of most browsers prevents the loading of additional resources, like javascript or css. Are you using https?