Friday, 5 August 2016

FIREBUG LITE USE OFFLINE

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.html
http://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>




Posted by on Friday, 5 August 2016 at 06:15
Labels: , , , , , , ,

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets