Firebug not working in print preview - javascript

I am writing print CSS for my site. Now the problem is that Firebug or similar devtools don't work in the browser's print preview. So it's hard for me to detect the problem.
Does anyone have a suggestion how to debug CSS print layout?

The Chrome DevTools can do this by changing the Media CSS option in the Emulation menu.
Check this out: Suggestions for debugging print stylesheets?
On Firefox you must select the Display CSS by Media Type option with the Web Developer add-on and then Firebug will work. There's also an enhancement request for Firebug to support switching between different media types.
Check this out, too: How do you debug printable CSS?

Related

How to hide html source code? Even when viewing source?

I found this website https://samy.pl/ and even with my HTML knowledge I can't find the source of his site?
If you type "view-source:" before the website it should bring up the source but it doesn't?
He blocked most or all ways to inspect his source.
How is this possible?
You can actually see the sourcecode using Internet Explorer, or Safari with IE 11 set as useragent.
I'm not certain how he does it, but it is some kind of JavaScript that checks some flag in Chrome that tells him whether or not the inspector is open, and if true he removes the body and updates page so everything disappears.
Using IE and inspecting the source should give you the answer :)

how to create an slideshow without transition and inline styles adding to html? is it possible?

UPDATE: I have updated this post more than 5 times but still couldn't
get appropriate answer , I'll appreciate if you could read my question
carefully and answer it <3
I want to create slideshow just like bwin's mobile version website. I started to analyse how it works. but it works weird, if you use inspect element in google chrome or any browsers you can see the slideshow works without any inline styles added dynamically.
in every slideshows that I've seen before there was inline styles that they added to HTML tags in a specific time interval. in this case I can't see any inline styles that add to tags but it works like a charm. I checked the CSS files for the keyframe property and there was nothing and of curse they don't use transition too.
for more information is good to say they use angular as their front-end framework.
Note: please open the mobile version of the website in computer to see what is going on !
The address is : https://sports.m.bwin.com/en/sports
I'll be appreciated if you tell how does the bwin's slideshow works? and how to create this slideshow?
thanks a lot <3
UPDATE: Special thanks to Sergiu Paraschiv that he figured out google
chrome's dev tools doesn't show inline changes for translateX property
of DOM Shadows , he tested the bwin's mobile version with his Safari
in his Mac machine and he captured screenshot "imgur.com/a/Php4EhB" ,
so you can see the inline changes in Safari browser of Mac OS . Why
google chrome or firefox doesn't show the changes of inline translateX
property of the DOM Shadows?

chrome extensions: full width toolbars

Im currently working on a fork of the famous web developer extension (chrome, firefox, opera). Exactly I am working on the chrome extension.
The Firefox extension is shown like that:
Chrome instead shows only a icon...
..which toggles the "pretty small" widget:
A part of my goal with this fork is to change this toggle icon to a toolbar such as firefox does.
After studying the documentation chrome extensions (https://developer.chrome.com/extensions/devguide) I came to the result that this is not possible with default settings (browser actions, page actions,...).
When I looked again at the Table of Contents in the documentation I got an idea. There is the possibility to edit the bookmarks. So it could be possible to add an additional bookmark bar/row and place the single web developer actions as bookmark with the function on it.
Is this the right way for solving this? Because at the moment I only see possibilities with more or less dirty hacks. And doing it via bookmarks seems at least dirty.
PS: I also thought about this:
The plugin is actually the same on firefox and chrome and from the same author. So when this adaption of the toolbar in chrome would be easy possible then would not have such differences in the chrome and firefox addon.
Nope, that's simply impossible.
Chrome does not support custom toolbars, and that includes "an additional bookmark bar/row".
The closest, visually, would be injecting UI directly into the top of all pages. I don't think I need to explain why that is hacky.

Print website (chrome and angular) is not working (blank)

My website system is running on chrome 37+ and using Angular.js and bootstrap.
For some reason, I can't print my website.
When i try to print my website (using the browser print dialog), I usually get a blank print preview ("can not load print preview"). Sometimes it is not blank, but not really show my website.
I tried to run my website on some google chrome versions and some computers and it is not working.
I have been searching for reasons, but can't find one that will fix this issue.
Let my know for reasons for this issue. Thank you.
Chrome actually does have emulation of printing. See
You'll find this in a tab adjacent to console within developer tools. By enabling CSS media on print, you'll see your site with any print media applied. Once enabled, you may use the element inspection as usual to see how those extra css rules affect your site.
In particular, bootstrap will remove any background, and run a bunch of defaults across many typical elements.
Also, see this answer https://stackoverflow.com/a/21156904/2923245

how to display side bar panel in gmail using javascript and css?

I am going to display plugin for firefox and google chrome. i know that all this plugins are developed using javascript and CSS but i donnot know how to display sidebar panel for example facebook chat panel.
thanks in advance.
For information on how to write a Chrome extension, see the Chrome Extension docs.
https://developer.chrome.com/extensions/index.html
For information on how to write a Firefox extension, see the Firefox Extension docs.
https://developer.mozilla.org/en-US/docs/Extensions
In Chrome, for example, you'll need to insert a content script on the page you wish to display other information beyond what's already displayed. For more detail, see here:
http://developer.chrome.com/extensions/content_scripts.html

Categories

Resources