<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flávio Silveira &#187; debug</title>
	<atom:link href="http://flaviosilveira.com/tag/debug/feed/" rel="self" type="application/rss+xml" />
	<link>http://flaviosilveira.com</link>
	<description>Análise e Desenvolvimento web</description>
	<lastBuildDate>Mon, 06 Feb 2012 09:00:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>Firefox ajudando no seu dia de trabalho&#8230;</title>
		<link>http://flaviosilveira.com/2009/firefox-ajudando-no-seu-dia-de-trabalho/</link>
		<comments>http://flaviosilveira.com/2009/firefox-ajudando-no-seu-dia-de-trabalho/#comments</comments>
		<pubDate>Fri, 09 Jan 2009 03:05:14 +0000</pubDate>
		<dc:creator>flaviosilveira</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Programação em geral]]></category>
		<category><![CDATA[add-ons]]></category>
		<category><![CDATA[complementos]]></category>
		<category><![CDATA[debug]]></category>
		<category><![CDATA[mozilla firefox]]></category>

		<guid isPermaLink="false">http://www.flaviosilveira.com/?p=22</guid>
		<description><![CDATA[Fui à casa do meu amigo Jean há alguns dias, ajudar com algumas soluções de programação para o seu site. E no vai e vem da programação comecei a apresentar e adicionar umas ferramentas no firefox dele. Ele ficou completamente maravilhado com a coisa toda, e isso me deixou pensando. Porra! A galera que está [...]]]></description>
			<content:encoded><![CDATA[<p>Fui à casa do meu amigo Jean há alguns dias, ajudar com algumas soluções de programação para o seu site. E no vai e vem da programação comecei a apresentar e adicionar umas ferramentas no firefox dele. Ele ficou completamente maravilhado com a coisa toda, e isso me deixou pensando. Porra! A galera que está começando ou quem já programa e não conheçe, precisa saber dessas ferramentas.  <strong></strong></p>
<p><strong>Muitas vezes algumas coisas por serem tão naturais para nós, faz parecer que todo mundo conhece aquilo.</strong></p>
<p>A maioria de programadores e desenvolvedores gostam de Firefox, fato!<br />
Talvez em primeiro lugar para ir de encontro com a Microsoft. Segundo porque o Firefox geralmente obedece o que está no seu código, e terceiro, porque ele ajuda muito quando você tem umas ferramentas bacanas adicionadas a ele.</p>
<p>Para adionar complementos no seu firefox duas opções:<br />
- Você pode ir no Menu: <em>Ferramentas &gt;&gt; Complementos e procurar por ele na aba Adicionar. </em><br />
- Ou ir direto no <a href="https://addons.mozilla.org/pt-BR/firefox/">site de plugins da Mozilla</a>, e baixá-los para sua máquina. Para posteriormente instalar as extensões que você baixou, vá no Menu: <em>Arquivo&gt;&gt;Abrir Arquivo</em>.</p>
<p>Eis alguns complemetos que uso: <span id="more-22"></span><br />
<strong>WEB DEVELOPER</strong></p>
<p>A web developer é uma barra de ferramentas com várias coisas que vão te auxiliar. Logo que você reinicia o firefox após instalar a extensão, ela vem aparecendo abaixo da barra de navegação. <a href="http://flaviosilveira.com/wp-content/uploads/2009/01/post0.jpg"><img class="alignnone size-full wp-image-23" title="post0" src="http://flaviosilveira.com/wp-content/uploads/2009/01/post0.jpg" alt="" width="627" height="79" /></a> Existem muitas coisa legais na web developer onde só mexendo você vai descobrindo. Vou mostrar as que mais uso.  <em><strong></strong></em></p>
<p><em><strong>Cache</strong> </em>- Quem nunca ficou de cara com o cache de browser e aquele alert ou print que não aparecia ? Pois é. Resolva esse problema indo em <em>Disable &gt;&gt; Disable Cache</em>.<br />
<a href="http://flaviosilveira.com/wp-content/uploads/2009/01/post.jpg"><img class="alignnone size-full wp-image-24" title="post" src="http://flaviosilveira.com/wp-content/uploads/2009/01/post.jpg" alt="" width="149" height="244" /></a><br style='clear: both;'/></p>
<p><em><strong>CSS</strong></em> &#8211; Quer ver como a página que está visitando fica sem o css ? Vá na Aba <em>CSS &gt;&gt; Disable Styles &gt;&gt; All Styles</em><br />
<a href="http://flaviosilveira.com/wp-content/uploads/2009/01/post1.jpg"><img class="alignnone size-full wp-image-25" title="post1" src="http://flaviosilveira.com/wp-content/uploads/2009/01/post1.jpg" alt="" width="500" height="163" /></a><br style='clear: both;'/></p>
<p><em><strong>IMAGES</strong> </em>- Quer limpar as imagens do site ? <em>Images&gt;&gt; Disable Images &gt;&gt; All Images</em> <em><strong><br />
INFORMATION</strong></em> &#8211; Quer ver como está a divisão do site ? <em>Information &gt;&gt; Display Block Size </em></p>
<p>São inúmeras coisas que você pode fazer, basta vasculhar a barra. Desabilitar javaScripts e MetaTags, Limpar os cookies ou todos os dados gravados, Manipular a dimensão do browser, Mostrar campos hidden de formulários, Validar css, Validar Html&#8230;</p>
<p>Enjoy Yourself&#8230;Have a fun&#8230;.</p>
<p>Você pode desabilitar a barra caso queira indo no menu do firefox: <em>Exibir &gt;&gt; Barra de ferramentas &gt;&gt; Web Developer &gt;&gt; ToolBar</em></p>
<p><strong>FIREBUG </strong></p>
<p>O firebug é uma ferramenta para facilitar o debug de scripts e códigos web em geral.<br />
Após instalar essa extensão e reiniciar o seu Firefox, Você vê uma pequena barata no canto inferior direito, ao clicar nela um painel se abre.<br />
<a href="http://flaviosilveira.com/wp-content/uploads/2009/01/post2.jpg"><img class="alignnone size-full wp-image-26" title="post2" src="http://flaviosilveira.com/wp-content/uploads/2009/01/post2.jpg" alt="" width="604" height="201" /></a><br style='clear: both;'/></p>
<p>Logo ao lado do ícone da barata no painel, você tem a ferramenta Inspecionar. Com ela você pode achar Objetos Html facilmente pelos sites.<br />
Basta clicar em inspecionar e depois partir para cima do site. Experimente!</p>
<p>Abaixo, no console, geralmente aparecem os erros de javaScript, e você também pode ver algumas informações quando está trabalhando com ajax.<br />
Veja abaixo um exemplo de retorno via ajax de uma consulta no banco aparecendo no console&#8230;<br />
<a href="http://flaviosilveira.com/wp-content/uploads/2009/01/post4.jpg"><img class="alignnone size-full wp-image-27" title="post4" src="http://flaviosilveira.com/wp-content/uploads/2009/01/post4.jpg" alt="" width="632" height="121" /></a><br style='clear: both;'/></p>
<p>Na aba HTML, você pode editar  o html e o css, fazendo assim uma prévia do que você precisa alterar nos seus arquivos para deixar as coisas como você quer.<br />
No exemplo abaixo adicionei a cor vermelha no body do google pelo firebug.<br />
<a href="http://flaviosilveira.com/wp-content/uploads/2009/01/post5.jpg"><img class="alignnone size-full wp-image-28" title="post5" src="http://flaviosilveira.com/wp-content/uploads/2009/01/post5.jpg" alt="" width="636" height="233" /></a><br style='clear: both;'/></p>
<p>O resultado<br />
<a href="http://flaviosilveira.com/wp-content/uploads/2009/01/post6.jpg"><img class="alignnone size-medium wp-image-29" title="post6" src="http://www.flaviosilveira.com/wp-content/uploads/2009/01/post6-300x173.jpg" alt="" width="300" height="173" /></a><br style='clear: both;'/></p>
<p>Descubra as maravilhas do Firebug, onde por exemplo, você pode ver um mapa completo dos elementos HTML para pegá-los via JavaScript na Aba DOM</p>
<p>Para finalizar duas extensões simples e fáceis de usar.</p>
<p><strong>MEASURE IT </strong></p>
<p>A measure It é uma régua, que ajuda quando você quer medir espaçamentos ou coisas do gênero.<br />
Logo após instalar, ela aparece no canto inferior esquerdo. Basta Clicar e usar.</p>
<p><a href="http://flaviosilveira.com/wp-content/uploads/2009/01/post7.jpg"><img class="alignnone size-full wp-image-30" title="post7" src="http://flaviosilveira.com/wp-content/uploads/2009/01/post7.jpg" alt="" width="197" height="214" /></a> <strong></strong><br style='clear: both;'/></p>
<p><strong>COLORZILLA</strong></p>
<p>A colorzilla funciona meio que da mesma maneira. Ela serve para caçar o RGB ou o Hexadecimal daquelas cores que você gostou internet a fora.<br />
Ela também aparece no canto inferior esquerdo após ser instalada.</p>
<p>Clique na ferramenta. Clica na cor que você quer. Depois selecione uma das opções no painel da ferramenta, clicando com o botão de opções do mouse (vulgo botão direito) no ícone dela.<br />
<a href="http://flaviosilveira.com/wp-content/uploads/2009/01/post8.jpg"><img class="alignnone size-full wp-image-31" title="post8" src="http://flaviosilveira.com/wp-content/uploads/2009/01/post8.jpg" alt="" width="207" height="141" /></a><br style='clear: both;'/></p>
<p><strong>DICA</strong></p>
<p>Essas duas últimas extensões, a measure It e a ColorZilla, eu usei muito quando transformava PSD&#8217;s em HTML e CSS.<br />
Eu exportava um arquivo JPG do Photoshop. Abria com o Firefox. E então media os containers e pegava as cores certinhas do Layout.</p>
<p><strong>CONCLUSÃO</strong><br />
Esses são os Complementos do Firefox que mais uso para programar, debugar e desenvolver.<br />
Claro, não listei aqui tudo que se pode fazer com elas, cabe a você ir experimentando e estudando.</p>
<p>Alguns outros Browsers também disponibilizam complementos, alguns que até são similares aos vistos aqui, dê uma pesquisada.</p>
<p>Hoje é isso.<br />
Valeu !<br />
Até mais !<br />
Qualquer coisa estamos na área !</p>
]]></content:encoded>
			<wfw:commentRss>http://flaviosilveira.com/2009/firefox-ajudando-no-seu-dia-de-trabalho/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

