view and change html, css & Js

As long as web sites are un­mini­fied, their con­tent can be viewed by any­one. Chrome’s de­vel­oper tools sim­plify the ac­tion

Web Designer - - Design Develop Create -

First of all, check the ver­sion of Chrome — the fol­low­ing steps work on ver­sion 70.0.3538.67 run­ning on a 64-bit Ubuntu work­sta­tion. Next, open the ham­burger menu and click More Tools > De­vel­oper Tools. The browser re­sponds by open­ing a pane on the left-hand side of your screen. It should be re­sized in the first step — by de­fault, the browser doesn’t as­sign enough screen real es­tate. When done, the screen looks sim­i­lar to the one shown in the fig­ure. By de­fault, De­vel­oper Tools starts up with the Con­sole tab loaded. It con­tains the out­put emit­ted by in­vo­ca­tions of the con­sole-log­ging func­tion. Ren­der­ing er­rors also show up there — if you find red lines, some­thing is amiss in the markup or the code of your page. A click on the lit­tle ‘URL’ on the right-hand side brings you to the line, which caused the mes­sage to show up.

In­spect the mark-up

If your in­ter­est fo­cuses on markup, use the El­e­ments tab shown in the fig­ure. It shows the markup the browser cur­rently ren­ders. You can ex­pand and com­pact it in a fash­ion sim­i­lar to a tree view — hide un­needed el­e­ments to pre­vent sen­sory over­load. The rai­son d’etre of the tab is the dis­play of the CSS struc­ture. Wid­gets ‘col­lect’ CSS from var­i­ous sources, which are dis­played neatly and next to one an­other. In the case of the ex­am­ple shown in the fig­ure, we see that styles were pro­vided from both the ‘div’ tag and the ‘main’ markup of the page. Chrome lets you edit most at­tributes on the fly. Dou­ble-click any of the black texts to trans­form the la­bel into an ed­i­tor, then en­ter the newly de­sired value and press the Re­turn key. The ren­derer picks up th­ese changes and ap­plies them to the DOM on the fly. This is es­pe­cially use­ful when try­ing to op­ti­mise colours or place­ment is­sues; hav­ing to reload a page to pre­view changes be­comes tire­some. Fi­nally, take a look at the text box on top of the pane. It en­ables you to fil­ter the markup items shown: for ex­am­ple, en­ter ‘mdc’ to limit the view to all styles in­her­ited from the Ma­te­rial De­sign li­brary used later in this ar­ti­cle. When a fil­ter is ac­tive, a yel­low back­ground shows up in a fash­ion sim­i­lar to the one shown in the fig­ure.

per­form a de­tailed anal­y­sis

In mod­ern web browsers, the DOM is not lim­ited to ‘stat­i­cal’ pre­sen­ta­tion is­sues. It also gov­erns event flow and place­ment. Switch to the Com­puted tab to re­veal a list of ‘di­men­sional’ prop­er­ties. This is in­cred­i­bly use­ful when ar­rang­ing wid­gets on the screen in an ex­act fash­ion. Mov­ing to the Event Lis­ten­ers tab pro­vides an over­view of event flows. Use this fea­ture to quickly weed out prob­lems re­lated to user in­ter­ac­tion: if an event does not trig­ger, start out by check­ing the event han­dler con­nec­tions. Fi­nally, the Prop­er­ties win­dow lets you take a look at the at­tributes stored in­side the in­di­vid­ual DOM nodes. If you’ve ever spent a lot of time hunt­ing down Dom-ma­nip­u­lat­ing code, the value is clear.

A yel­low back­ground in­forms you that the con­tent of the win­dow are sub­ject to fil­ter­ing

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.