This is a question which frequently pops here on StackOverflow.
The "problem" here is often AdBlock; a Chrome extension which filters out potentially unwanted adverts from a page. If your element has a property which is detected by AdBlock (long list) it will silently have its display
set to none
.
Detected class
example:
<div class="ad_box">
<!-- Anything within this divider will not be displayed -->
</div>
Detected image src
example:
<img src="../300x250/1_512648b566578.png" alt="This doesn't display either!" />
(This applies to CSS background
images as well!)
How can I prevent this from happening in order to test it on my website?
There are a several ways to fix this problem, but the easiest methods would be:
Pause the extension, or prevent it from running on that specific page or your domain by left clicking on the icon in the top right corner (default position) of your screen and selecting the required option:
Alternatively you could disable the extension by navigating to
chrome://extensions/
(in your URL bar) and unchecking "Enable":
Update
A couple of months ago the AdBlock extension was updated to display how many ads have been blocked on a page within the extension's icon. Provided the icon is set to visible, you can now easily see how many different content sections have been blocked by the extension: