Friday, 5 August 2016
FIREBUG LITE USE OFFLINE
1)GET CSS CODE BY COPY CSS SELECTOR OR GOOGLE INSPECT
2) OR GET CSS CODE BY COPY CSS SELECTOR THEN ADD CSS
CODE BY GOOGLE INSPECT
READ MORE:
http://fbgadgets.blogspot.co.uk/search/label/WebSiteTools
-------------------------------------------------------------------------------------------------------------
FIREBUG USE TOOL OFFLINE
1) INSERT JS FILE LINK BEFORE BODY TAG OR
INSERT JS FILE LINK BEFORE HTML CLOSED TAG
http://fbgadgets.blogspot.co.uk/2014/05/firebug-lite-for-google-chrome.html
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/googleChrome.js"/>
<body>
-----------------------------------------------------------------------------------------------------------------FIRE BUG FILE LITE CODE:
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/googleChrome.js"/>
-----------------------------------------------------------------------------------------------------------------
Firebug.extend(function(FBL) { with (FBL) {
if
(!Env.isChromeExtension) return;
var
channel;
var
channelEvent;
Firebug.GoogleChrome =
extend(Firebug.Module,{
initialize: function(){
var doc =
FBL.Env.browser.document;
if (!doc.getElementById("FirebugChannel")){
channel =
doc.createElement("div");
channel.id = "FirebugChannel";
channel.firebugIgnore = true;
channel.style.display = "none";
doc.documentElement.insertBefore(channel,
doc.documentElement.firstChild);
channelEvent =
document.createEvent("Event");
channelEvent.initEvent("FirebugChannelEvent", true, true);
channel.addEventListener("FirebugChannelEvent",
onFirebugChannelEvent);
}
},
dispatch: function(message){
channel.innerText =
message;
channel.dispatchEvent(channelEvent);
}
});
var
onFirebugChannelEvent = function(){
var name =
channel.innerText;
if
(name.indexOf("FB_contextMenuClick") == 0){
var doc =
FBL.Env.browser.document;
var
contextMenuElementXPath = name.split(",")[1];
var contextMenuElement
= getElementsByXPath(doc, contextMenuElementXPath)[0];
Firebug.chrome.toggle(true);
setTimeout(function(){
Firebug.chrome.selectPanel("HTML");
Firebug.HTML.select(contextMenuElement);
},50);
}
else if (name
== "FB_toggle"){
Firebug.chrome.toggle();
}
else if (name
== "FB_openInNewWindow")
{
setTimeout(function(){
Firebug.chrome.toggle(true, true);
},0);
}
};
var
getElementsByXPath = function(doc, xpath){
var nodes =
[];
try {
var result
= doc.evaluate(xpath, doc, null, XPathResult.ANY_TYPE, null);
for (var item =
result.iterateNext(); item; item = result.iterateNext())
nodes.push(item);
}
catch (exc)
{
}
return nodes;
};
Firebug.registerModule(Firebug.GoogleChrome);
}});
-------------------------------------------------------------------------------------------------------------------
HTML CODE WITH FIRE BUG TOOL
JUST REPLACE HTML TAG WITH BELOW CODE
-----------------------------------------------------------------------------------------------------------------
<html class=" js no-touch csstransforms csstransforms3d csstransitions svg js-ready" lang="en-US" debug="true">
<div id="FirebugChannel" style="display: none;">
</div>
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/firebug-lite.js" id="FirebugLite" firebugignore="true" extension="Chrome">
</script>
<!--<![endif]-->
https://www.jetbrains.com/webstorm/help/live-editing-of-html-css-and-javascript.htmlhttp://fbgadgets.blogspot.co.uk/2015/12/simple-css-layout.html
--------------------------------------------------------------------------------------------------------------------
<html class=" js no-touch csstransforms csstransforms3d
csstransitions svg js-ready" lang="en-US" debug="true">
<div id="FirebugChannel" style="display: none;">
</div>
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/firebug-lite.js" id="FirebugLite" firebugignore="true" extension="Chrome">
</script>
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
<style>
.header {
width: 900px;
height: 60px;
border: 2px solid Black;
}
#menu {
float:left;
background: #f0f0f0;
border: 2px solid Black;
color: #ddd;
width: 900px;
height: 35px;
font-family: 'Oswald', Arial, sans-serif;
margin: 0 auto;
}
#menu ul,
#menu li {
margin: 0 auto;
padding: 0 0;
list-style: none
}
#menu ul {
height: 35px;
width: 1100px
}
#menu li {
float: left;
display: inline;
position: relative;
font: bold 14px Arial;
text-transform: uppercase;
font-weight: normal
}
#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #77778b;
font-family: 'Oswald', Arial, sans-serif;
text-shadow: 0 1px 0 #fff;
}
#menu li a {
border-right: 1px solid #e5e5e5;
}
#menu li a:hover {
color: #444;
background-color: #e5e5e5;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 30px;
opacity: 0;
cursor: pointer
}
#menu label {
font-size: 20px;
display: none;
width: 35px;
height: 20px;
line-height: 20px;
text-align: center;
color: #77778b
}
#menu label span {
font: normal 14px Oswald;
position: absolute;
left: 35px;
}
#menu ul.menus {
height: auto;
overflow: hidden;
width: 180px;
background: #f0f0f0;
border-top: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
position: absolute;
z-index: 99;
display: none;
left: -1px;
}
#menu ul.menus li {
display: block;
width: 100%;
font-size: 13px;
text-transform: none;
text-shadow: none
}
#menu ul.menus a {
color: #77778b;
text-transform: uppercase
}
#menu li:hover ul.menus {
display: block
}
#menu a.dropdown {
padding: 0 27px 0 14px
}
#menu a.dropdown::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: #9292a2 transparent transparent transparent;
position: absolute;
top: 14px;
right: 9px
}
#menu ul.menus a:hover {
background: #ddd;
color: #333
}
.container {
width: 900px;
height: 400px;
border: 2px solid Black;
}
.footer {
width: 900px;
height: 50px;
border: 2px solid Black;
}
.main {
width: 600px;
margin-top: 20px;
margin-left: 15px;
height: 300px;
float: left;
border: 2px solid Black;
}
.sidebar {
width: 250px;
height: 300px;
float: left;
margin-top: 20px;
margin-left: 15px;
border: 2px solid Black;
background-color:#transparent;
}
</style>
</style>
</head>
<body>
<div class="header">
</div>
<nav id='menu'>
<input type='checkbox'/>
<label><i class='icon-reorder'></i><span>Navigation</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='dropdown' href='#'>Drop Menu</a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a class='dropdown' href='#'>Drop Menu 1</a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
</ul>
</nav>
<div class='clear'></div>
<div class="container">
<div class="main">
</div>
<div class="sidebar">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment