{{ page.title }}
9 |
12 |
16 |
17 |
52 | 13 | 14 | {{ page.content }} 15 |
Get the most of your developer tools in Chrome, Firebug, Firefox, Internet Explorer, Opera and Safari.
4 | 5 |With {{ site.me.name }}, a {{ site.me.job }} in {{ site.me.location }}.
6 | 7 |I'd love to talk
at your event!Contact me!
13 | 14 | {{ page.content }} 15 |
15 | 16 | {% for browser in page.browsers do %}{% endfor %} 17 | Favorite
18 | 19 | {{ page.content }} 20 | 21 | 56 |Welcome to "Secrets of the Browser Developer Tools"!
10 | 11 |Over the last few years there has been one tool that has helped out every web developer more than any other – the browser developer tools. Working in harmony with the web browser, the developer tools allow us to manipulate DOM elements; gauge performance and debug JavaScript from within the browser window in real time.
12 | 13 |There are many features hidden away in the browser development tools and this site aims to help you find them. We're not expecting every one of these to be unknown to you, but hopefully some of these will help you to become an even better web developer. We will not just be showing you in Chrome (as so many articles do) - we need our sites to work in every browser, so where ever possible we'll give you the instructions on how to use each browser. Each browser has its own web developer tools with its own capabilities, and we aim to cover that here.
14 | 15 |This is by no means an exhaustive list, we're still adding secrets to the site - you can expect regular updates with new secrets over the coming days, weeks and months.
16 | 17 |I don't know them every secret myself, so if you have more to share, why not contribute?
18 | 19 |Happy Developing!
20 | 21 |Andi Smith
-------------------------------------------------------------------------------- /_posts/2013-05-31-akqa-anoraks.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-05-31 19:00:00 3 | layout: post 4 | published: true 5 | 6 | title: AKQA Anoraks 7 | --- 8 | 9 |Last night I presented my first session on "Secrets of the Browser Developer Tools" at AKQA Anoraks, and I also took the opportunity to publicly announce the availability of the site.
10 | 11 |I've spoken at AKQA Anoraks a few times before, and it's great to see an audience so receptive to the talk I was giving. Hopefully everybody came away with at least 1 new way of working within the Developer Tools. At the start of the talk I asked how many people were using each of the Browser Developer Tools as their primary development tool. The rough results of the survey, bearing in mind I was counting fast, were as follows:
12 | 13 |Chrome Developer Tools have by far the best feature set, and it appears developers are aware of this with their strong alliance with the browser. Or, could it be that the number of presentations, talks and videos on Chrome Dev Tools far outweighs any of the competition?
23 | 24 |Regardless, here are the slides for last nights talk. If you'd like me to talk at your event - whether it's a meetup, conference or learning session - please get in contact!
25 | 26 |Happy Anoraking!
27 | 28 | -------------------------------------------------------------------------------- /_posts/2013-06-03-filters.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-03 23:20:00 3 | layout: post 4 | published: true 5 | 6 | title: Filters 7 | --- 8 | 9 |Firstly, a BIG thank you to everyone who has visited, tweeted, shared and contributed to the site in its first week. The response has been overwhelming, and I'm pleased to say this is just the beginning! Please keep spreading the word about the site, and I'll keep adding new secrets and features!
10 | 11 |This week I've added a number of new secrets, but I've also see some changes to the way the site works. Looking at initial analytics data, it seemed a lot of users were visiting the homepage, seeing the filters and interacting without reading any secrets.
12 | 13 |So I've re-vamped filters from a full page panel to a single line. The left side drop down switches between all and favorites (with date to come soon); while the right side toggles each of the browsers. I've removed the category feature altogether for the meantime - but I'd be interested in knowing whether this is something there is a demand for.
14 | 15 |The new feature bar is still a work in progress - there's additional features to be added such as sorting by date - but it should mean you can access the content of the site much quicker. The code needs some tidying too.
I'm keen to make changes and see the reaction rather than wait days to perfect an idea, and I'd love to know your feedback on the site whether you think it is good or bad, if you have any comments or ideas - please submit them here, or message me on Twitter.
18 | 19 |Also, if you have any secrets you'd like to share, please contribute!
20 | 21 |Finally, please ensure you follow @devtoolsecrets for all the latest news.
22 | 23 |
Happy filtering!
24 | 25 | -------------------------------------------------------------------------------- /_posts/2013-06-14-60000.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-14 12:30:00 3 | layout: post 4 | published: true 5 | 6 | title: 60,000 7 | --- 8 | 9 |This last week has been a bit of a blur for me.
10 | 11 |At the start of the week, the Can I Use Web Widget which I wrote late last year went viral, and I had so much positive feedback on the idea, thank you to everyone who has shared and tweeted about it. Sara Soueidan has implemented it in to her site now - any other sightings in the wild?
12 | 13 |Later in the week, "Secrets of the Browser Developer Tools" went viral too with a massive increase in traffic. Since launch, the secrets on these pages have been read almost 60,000 times. That's incredible. If even a quarter of those secrets read were new discoveries, then there are a lot of developers with more knowledge about their tools than they were last week!
14 | 15 |The traffic is likely to slow down after the initial flood, but let's keep spreading the word about these awesome tools, so keep tweeting, keep telling your friends. I'm speaking at London Web this Thursday (20th June) and I'm hoping to speak at a couple of conferences this year (talk proposals are in!) - so we can spread the word and help more people!
16 | 17 |So now the aim is to keep adding those secrets so we can keep learning new things. I like to aim high, so we're going to aim for 200 secrets by the end of the year. Are there even 200 secrets? There's only one way to find out!
18 | 19 |Thank you to everyone who has contributed something to the site. Whether your contribution has been a bug report; a typo fix; adding another browser or a brand new secret, thank you. The support from you all is amazing.
20 | 21 |Make sure you follow @devtoolsecrets for all the latest news.
22 | 23 |
Finally, I'd love to have some developer quotes about this site for use in a top of the page teaser. If you'd like to be quoted, please send a tweet @devtoolsecrets. I'll use the best ones :)
24 | 25 |Happy Discoveries!
26 | 27 | -------------------------------------------------------------------------------- /_posts/2013-06-21-london-web.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-21 00:35:00 3 | layout: post 4 | published: true 5 | 6 | title: London Web 7 | --- 8 | 9 |I've just got back from presenting at this months'
10 |
Congratulations to Nathan O'Hanlon, the organiser of London Web, for becoming a father today (technically, yesterday now). Obviously he couldn't make the meetup today - which made things interesting as I found myself introducing myself!
13 | 14 |As I have done previously, I asked the audience (of around 50 people) what Dev Tools they were using as their primary development tool and the answers were (roughly) as follows:
15 | 16 |It's interesting to see the continued usage for Firebug despite it not receiving updates as frequently as the others. I hope the tools for Firefox, Opera and Safari are being used (even if not as primary tools) as they are all great resources. As I mention in my talks, we are not building sites for just one browser, so it is important to know the features and benefits of each.
26 | 27 |Here are the slides for my London Web talk. If you'd like me to talk at your event, drop me a message. I've signed up to speak at a few conferences, so I'm hoping to get to share the Dev Tools love around the world; but in the meantime I should be able to announce my next London talking appearance in the next few days so stay tuned.
28 | 29 |Night London!
30 | 31 | -------------------------------------------------------------------------------- /_posts/2013-06-30-the-future-of-dev-tools-opera-next.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-30 11:15:00 3 | layout: post 4 | published: true 5 | 6 | title: The Future of Dev Tools - Opera Next 7 | --- 8 | 9 |I thought I'd try something a little different today, by creating a (very) short video blog introducing Opera Next's Developer Tools, which are changing significantly from what was previously available in Opera (Dragonfly) now Opera are using the Chromium browser.
10 | 11 | 12 | 13 |When I started making the video, I don't think I appreciated how long it would take to do, so don't expect too many video blogs. However, it would be nice to run more video blogs in the future - firstly, one on IE11 where we take a look around the new developer tools there; and then perhaps run the videos with a bit more structure with "latest developments", "questions and answers" and perhaps even a couple of interviews with the people that make these tools possible?
14 | 15 |Let me know your thoughts over on Twitter.
16 | 17 |It's a Wrap!
18 | 19 | -------------------------------------------------------------------------------- /_posts/2013-07-12-london-ajax.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-07-12 00:35:00 3 | layout: post 4 | published: true 5 | 6 | title: London Ajax 7 | --- 8 | 9 |This week I got to present at
10 |
Again I asked the audience what Dev Tools they were using as their primary development tool and the answers were (roughly) as follows:
13 | 14 |If you're a Firebug fan, you may be please to hear that Steven Roussey, one of the contributors to Firebug, has created a massive update of Firebug secrets. So please join me in giving a big thank you to him!
24 | 25 |Sorry that I haven't been posting many secrets recently. All my spare time has been spent working on something else (related to Developer Tools), that I will be able to announce at a later date. Needless to say, I myself will be back to posting secrets in the coming days.
26 | 27 |Until Then!
28 | 29 | -------------------------------------------------------------------------------- /_watch.sh: -------------------------------------------------------------------------------- 1 | # _watch.sh 2 | 3 | sass --watch assets/scss/styles.scss:assets/css/styles.min.css --style compressed --sourcemap 4 | #sass --watch assets/scss/styles.scss:assets/css/styles.css --style expanded 5 | 6 | exit 0 7 | 8 | -------------------------------------------------------------------------------- /about/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | date: 2013-01-01 00:00:00 4 | layout: site 5 | section: about 6 | order: none 7 | --- 8 | 9 | # About # 10 | 11 | ## Welcome ## 12 | 13 | Welcome to "Secrets of the Browser Developer Tools"! Over the last few years there has been one tool that has helped out every web developer more than any other – the browser developer tools. Working in harmony with the web browser, the developer tools allow us to manipulate DOM elements; gauge performance and debug JavaScript from within the browser window in real time. 14 | 15 | Happy Developing! 16 | 17 | {{ site.me.name }} 18 | 19 |Content should go here.
83 |To provide information for a particular browser, add a class (lowercase, hyphen for internet-explorer).
84 |// code should be wrapper in these
Latest news - {{ post.title }}
11 | {% endfor %} 12 | 13 |Displaying 0 secrets
49 | 50 |console.assert() can be used to test whether expressions are true or false.
It takes two parameters: the expression and the message to display. The message will only be shown in the console if the expression is FALSE.
25 | 26 |For example, console.assert(!true, 'This is not true'); will output 'This is not true' to the console.While console.assert(true, 'This is not true'); will not output anything to the console.
Running JavaScript commands from the console command line is incredibly useful, but if you have an iframe to contend with it can be a problem if you don't know how to target your frame.
22 | 23 |In Firebug, you can use the following command to focus on the frame in question and execute your commands against:
24 |cd(window.frames['frameName']);
25 |
26 | Chrome allows you to change frame from a dropdown list found at the bottom of the console window.
27 | 28 |Opera has a dropdown for changing frame which is available from the “Console” and “Documents” tab. The dropdown will only appear on the “Console” tab if there are frames to select.
29 | 30 |You can also get a list of any iframes on your page by using document.getElementsByTagName("iframe"); in the console.
If you need the result of the previous expression for your next console evaluation, you can use the variable $_, which is automatically set to the last expression result for you.
Firebug added support for this in 1.12
22 | -------------------------------------------------------------------------------- /secret/console-log-info-warn-error.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Log, Info, Debug, Warn, Error 7 | order: 05-00100 8 | browsers: 9 | - chrome 10 | - firebug 11 | - firefox 12 | - internet-explorer 13 | - opera 14 | - safari 15 | categories: 16 | - console 17 | parent: console 18 | tags: 19 | - secret 20 | --- 21 | 22 |console.log() is an extremely useful tool for outputting debug without having to use alerts; but there are some other methods that you can use to output information to ease viewing in the console.
console.log() will work printf style. So you can do things like this: console.log("%s is %d years old.", "Bob", 42).
You can use console.info() to output information messages; console.debug() to output debug messages; console.warn() to output warning messages and console.error() to output error messages.
You may also use the %c pattern to use the second argument as a style formatting parameter. For example: console.log("%cThis is green text on a yellow background.", "color:green; background-color:yellow");.
Firebug will show different icons for these variations, as well as box the messages in colorful backgrounds.
31 | 32 |Firefox will show a small grey icon next to info, warn and error messages to signal that they may require further attention. Firefox does not show anything different for debug - according to MDN it has been deprecated in Firefox in favour of console.log()
Chrome and Safari (nightly) will not show an icon for info, but will show a blue icon for debug; a yellow icon for warn and a red icon for error.
35 | 36 |You can output multiple values to any of these logging methods by separating your values with a comma, which can be handy for including objects and arrays on the same line. For example: console.log('Kings: ', kings);.
In Chrome despite the console having its own tab, it is possible to open the console from any tab by pressing the escape key, so you don't have to keep switching tabs.
22 | 23 |In Safari, the console sits at the bottom of the developer tools. The escape key is used to toggle visibility of the console log. Executing a command in to the console command line will also open the console log.
24 | 25 |In Firefox, you can quickly navigate to the console by pressing either Ctrl, Shift and K on Windows or Cmd ⌘, Option ⌥ and K on Mac.
26 | -------------------------------------------------------------------------------- /secret/console-output-data-as-a-table.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-13 11:12:00 3 | layout: secret 4 | published: true 5 | 6 | title: Output Data as a Table 7 | authors: 8 | - Aptary 9 | order: 05-00125 10 | browsers: 11 | - chrome 12 | - firebug 13 | categories: 14 | - console 15 | parent: console 16 | tags: 17 | - secret 18 | --- 19 | 20 |console.table() can be used to output data from an array of arrays or a list of objects in a sortable, tabular format.
For example, console.table([[10, true, "blue"],[5, false]]) will output the following:
If the number of elements in each object is not equal, the table will display undefined in cells for which there is no data.
To give the table custom column names, property names must be assigned to the elements in the object. Likewise, custom values for the (index) column can be set by naming each set of properties.
There is an optional second argument which allows you to explicity specify which columns to output. console.table({"London":{population:8173194, country:"UK", elevation:"24m"},"New York":{population:8336697, country:"USA", elevation:"10m"}},["population", "country"]) will output the following.
Sometimes you need to persist console information between page loads. Sometimes we need this for reference or perhaps to view any logs that occur on click or unload.
23 | 24 |In Chrome, right click in the console to reveal a menu with "Preserve Log upon Navigation" as an option. Selecting this will keep your console content.
25 | 26 |Firefox will persist console content by default. You can clear the console log by clicking the 'clear' button in the top right or opening and closing the tools.
27 | 28 |In Firebug, there’s an obvious button for persisting console content directly above the console.
29 | 30 |Opera will persist console content by default. You can clear the console log by right clicking and selecting "Clear console" or by opening and closing the tools.
-------------------------------------------------------------------------------- /secret/console-referencing-the-current-and-previous-element.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Referencing the Current and Previous Element 7 | order: 05-08000 8 | browsers: 9 | - chrome 10 | - firebug 11 | - firefox 12 | - opera 13 | - safari 14 | categories: 15 | - console 16 | parent: console 17 | tags: 18 | - secret 19 | --- 20 | 21 |If you have an element currently selected in your "Elements" tab, you can use the reference $0 to call it within your code. For example, to see the elements' contents you would type $0.innerHTML.
In Firebug and Opera, you can select the previous element you had highlighted using $1.
In Chrome and Safari, you can select further previous elements you have highlighted using $1 - $4.
In Firebug, you can select further previous elements you have highlighted using $n(2) - $n(5).
If you've typed a command in to the JavaScript console and you wish to re-run it, simply hit the up key to scroll through a list of previous commands you have called from the console.
-------------------------------------------------------------------------------- /secret/console-using-a-time-stamp-to-mark-the-timeline.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-08-23 15:19:00 3 | layout: secret 4 | published: true 5 | 6 | title: Using a Time Stamp to Mark the Timeline 7 | authors: 8 | - Jan Odvarko 9 | order: 05-00200 10 | browsers: 11 | - firebug 12 | - chrome 13 | categories: 14 | - console 15 | parent: console 16 | tags: 17 | - secret 18 | --- 19 |A time stamp label can be created by using console.timeStamp(label). A time stamp can be used together with HTTP traffic timing to measure when a certain piece of code was executed.
You can also add events to Chrome's timeline although it doesn't look quite like the photo in the documentation as it is wrapped in "Function Call (InjectedScript:1)", but they are visible as yellow markers in the timeline at the top of the lower "records" frame that will show the message in a tooltip if you hover over them.
24 | -------------------------------------------------------------------------------- /secret/console-using-the-console-timer.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-18 15:51:00 3 | layout: secret 4 | published: true 5 | 6 | title: Using the Console Timer 7 | authors: 8 | - Aptary 9 | order: 05-00175 10 | browsers: 11 | - chrome 12 | - firebug 13 | - firefox 14 | - opera 15 | - safari 16 | categories: 17 | - console 18 | parent: console 19 | tags: 20 | - secret 21 | --- 22 | 23 |A timer can be started in the console by using console.time(label). The string label is needed so we have a reference to the timer when we want to stop it. The timer is stopped by calling console.timeEnd(label), which will output to the console the time in milliseconds since the timer (identified by label) was started.
Chrome allows you to profile and debug canvas elements from the Developer Tools. It can be used for both 2D and WebGL canvas projects.
19 | 20 |To be able to do this, you need to have enabled the "Experiments" tab. If you haven't already, navigate to chrome://flags and enable the option marked "Enable Developer Tools experiments". You'll need to press "Relaunch Now" button at the bottom of the page to apply your changes. Go to the Settings panel of Chrome Developer Tools by clicking the cog on the bottom right. Click the "Experiments" tab and check the option "Canvas inspection".
21 | 22 |Now visit the "Profile" tab and you will see an option called "Capture Canvas Frame". The Developer Tools may ask you to Reload the page to use the canvas. Pressing "Start" captures a single frame of the canvas application. Alternatively, you can click the box below to switch to "Consecutive Frames" which allows for capture of multiple frames.
23 | 24 |Chrome creates a log of each call to canvas, providing a list of each call to the context and a screenshot. You can click one of the log items to replay the frame in the Developer Tools and see which commands were called in the order they were called and from which line.
25 | 26 | 27 | 28 |Firefox has Canvas and WebGL Shader debugger, giving you features to inspect frames, fps, modify shaders and more.
29 | 30 |In order to enable these tools, go to Devtools settings (the cog icon in devtools) and check "Canvas" and "Shader Editor".
31 | -------------------------------------------------------------------------------- /secret/debugging-conditional-breakpoints.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Conditional Breakpoints 7 | order: 20-00430 8 | browsers: 9 | - chrome 10 | - firebug 11 | - firefox 12 | - internet-explorer 13 | - opera 14 | - safari 15 | categories: 16 | - debugging 17 | parent: debugging 18 | tags: 19 | - secret 20 | --- 21 | 22 |Conditional breakpoints are useful for adding breakpoints to the code without having to hit them every time. For example, if you know there is a bug in your code at the last item you can use a conditional comment to check whether it is the last item before activating the debugger. The breakpoint will fire whenever the condition is TRUE.
23 | 24 |To create a conditional breakpoint in Chrome, create a normal breakpoint and then right click on the breakpoint and select "Edit Breakpoint" to add a condition.
25 | 26 |In Firebug, conditional breakpoints can be created by first creating a normal breakpoint and then right clicking. A input box will appear allowing you to add a condition.
27 | 28 |In Firefox, right click on the line of JavaScript you wish to break on and select "Add Conditional Breakpoint".
29 | 30 |In Internet Explorer, create a normal breakpoint. Right click on the breakpoint and select "Condition...".
31 | 32 |In Opera, create a normal breakpoint and then right click on the breakpoint before selecting "Add Condition".
33 | 34 |In Safari, ensure both the script and "Debugger" panel are open. Create a breakpoint by selecting the line of code you wish to debug. Then in the "Debugger" panel, right click on the same breakpoint and choose "Edit Breakpoint".
-------------------------------------------------------------------------------- /secret/debugging-debugging-minified-javascript.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Debugging Minified JavaScript 7 | order: 20-00600 8 | browsers: 9 | - chrome 10 | - firefox 11 | - internet-explorer 12 | - opera 13 | - safari 14 | categories: 15 | - debugging 16 | parent: debugging 17 | tags: 18 | - secret 19 | --- 20 | 21 |Placing breakpoints on JavaScript makes debugging much easier, but if your code has already made it to production then it's probably been minified. How can you debug minified code? Helpfully, some of the browsers have an option to un-minify your JavaScript.
22 | 23 |In Chrome and Safari, simply select the 'Scripts' tab, find the relevant file and then press the "{ }" (pretty print) icon located in the bottom panel.
24 | 25 |In Internet Explorer, click the tool icon by the script selection drop down to find the option to format the JavaScript.
26 | 27 |Opera will automatically prettify minified JavaScript.
-------------------------------------------------------------------------------- /secret/debugging-debugging-with-debugger.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Debugging With debugger; 7 | order: 20-00420 8 | browsers: 9 | - chrome 10 | - firebug 11 | - firefox 12 | - internet-explorer 13 | - opera 14 | - safari 15 | categories: 16 | - debugging 17 | parent: debugging 18 | tags: 19 | - secret 20 | --- 21 | 22 |You can automatically create a breakpoint in your code by adding the following line to your JavaScript: debugger; . This will automatically create a breakpoint in the code when it is run with Developer Tools open.
Although useful for quickly adding breakpoints without having to find the line in the Developer Tools, be careful not to send code with debugger; live.
If you know your page is breaking when a certain part of the DOM changes, or you just want to find out what script is responsible for changing an elements attributes or children, Chrome and Firebug both allow you to set a breakpoint on DOM modification allowing you to find the culprit in your code. Simply highlight the element you want to monitor and right click to select the conditions to break on.
19 | -------------------------------------------------------------------------------- /secret/debugging-emulate-a-touch-device.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Emulate a Touch Device 7 | order: 20-00900 8 | browsers: 9 | - chrome 10 | - firefox 11 | categories: 12 | - debugging 13 | beta: true 14 | parent: debugging 15 | tags: 16 | - secret 17 | --- 18 | 19 |In Chrome, you can pretend to be a device that supports touch and emulate touch events directly within the browser. To do this open the Settings panel (the cog icon in the bottom right of Chrome Developer Tools), select the "Overrides" option and choose "Emulate Touch Events".
20 | 21 |In Chrome Canary, this will replace the cursor with a circle so you can not only tell which mode you are in, but also how large the surface area for a touch click may be.
22 | 23 |Firefox's Responsive Design View gives you the option to emulate touch events
24 | -------------------------------------------------------------------------------- /secret/debugging-emulate-a-user-agent.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Emulate a User Agent 7 | order: 20-00850 8 | browsers: 9 | - chrome 10 | - opera 11 | - safari 12 | categories: 13 | - debugging 14 | parent: debugging 15 | tags: 16 | - secret 17 | --- 18 | 19 |Sometimes it can be useful to pretend to be a different browser or device for debugging, especially if you are working on a site that employs device detection.
20 | 21 |In Chrome, open the Settings panel (the cog icon in the bottom right) and select the "Overrides" option to find the "User Agent" option. You can either select one of the built in options or select "Other" to write your own. Helpfully, Chrome will resize it's browser to the correct dimensions if you select a mobile or tablet device - this can easily be turned off by unticking "Device Metrics" if this is a problem.
22 | 23 |In Opera, click the "Panels" arrow at the bottom left of the browser window (above the Developer Tools). Select + and then "Customise". Go to the "Buttons" tab, select "Preferences" and drag the "Identify as Opera" drop down on to the browser toolbar.
24 | 25 |Safari offers the ability to change "User Agent" in the "Develop" menu bar. Here you will find a list of default devices together with the "Other..." option to add your own.
-------------------------------------------------------------------------------- /secret/debugging-inspect-scope-during-a-breakpoint.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-13-06 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Inspect Scope During a Breakpoint 7 | authors: 8 | - Kaizhi Wei 9 | - Andi Smith 10 | order: 20-00480 11 | browsers: 12 | - chrome 13 | - firebug 14 | categories: 15 | - debugging 16 | parent: debugging 17 | tags: 18 | - secret 19 | --- 20 | 21 |In Chrome, when your Javascript execution is paused during a breakpoint, you can interact with and inspect all variables and objects in the current scope, either by hovering over to inspect or by using the console.
22 | 23 |Firebug has the same option, but requires selecting "show closures" in the DOM menu.
24 | 25 |This powerful feature enables you to easily inspect variables inside closures if you set your breakpoint appropriately.
26 | 27 |Firebug has the additional feature of not having to be stopped at a breakpoint to access hidden closure variables. Take this example code:
28 |
29 | function Person(name)
30 | {
31 | this.introduce = function()
32 | {
33 | console.log("Hello, my name is %s", name);
34 | }
35 | }
36 |
37 | // create an instance of Person:
38 | var someone = new Person("Arthur");
39 |
40 | // we call a closure!
41 | someone.introduce(); // prints "Hello, my name is Arthur"
42 |
43 |
44 | The syntax to access the closure variables is as follow: closure.%variable. In the above example, you would access name using this expression: someone.introduce.%name // ==> "Arthur". Note that you can also change values:
45 | someone.introduce.%name = "Trillian";
46 | someone.introduce(); // prints "Hello, my name is Trillian"
47 |
48 |
49 | The same syntax works everywhere in Firebug where JavaScript is required, such as in the Watch Panel and conditional breakpoints.
50 |
Device Orientation changes can be emulated in Chrome. Simply go to the "Settings" menu, which can be opened using the cog icon at the bottom right of the Developer Tools and select the "Overrides" tab. Select the "Override Device Orientation" checkbox and enter new values in to the input boxes.
18 | 19 |Changing the values will trigger a deviceorientation event.
If you use Geolocation in your application, it may be useful to simulate being in a different location. Chrome allows you to do this by going to the "Settings" menu and selecting the "Overrides" tab. Within this tab it is possible to simulate a different latitude and longitude, and it is possible to simulate a geolocation being unavailable.
18 | 19 |You can obtain the longitude and latitude of a location from Google Maps by enabling the LatLng tooltip on the Google Maps Labs page.
-------------------------------------------------------------------------------- /secret/debugging-running-code-snippets.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2014-05-22 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Running Code Snippets 7 | order: 20-debugging-10000 8 | browsers: 9 | - chrome 10 | - firefox 11 | categories: 12 | - debugging 13 | beta: true 14 | parent: debugging 15 | tags: 16 | - secret 17 | --- 18 | 19 |If you find yourself running the same code time and time again, Chrome Canary provides a handy 'Snippets' area where you can store code to run from the console.
20 |To find 'Snippets', navigate to the 'Source' tab and it will be next to 'Sources' and 'Content Sources'. Right click in the empty area to find the option to create a new snippet, write your code and then whenever you need to run it, right click and select 'Run'.
21 | 22 |The Scratchpad tool has similar functionality and has been built into Firefox since version 6.
23 | -------------------------------------------------------------------------------- /secret/debugging-use-javascript-source-maps.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-01 09:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Use JavaScript Source Maps 7 | authors: 8 | - Andi Smith 9 | order: 20-00650 10 | browsers: 11 | - chrome 12 | categories: 13 | - debugging 14 | - editing 15 | parent: debugging 16 | tags: 17 | - secret 18 | --- 19 | 20 |When we deploy code to production, it's advisable to minify our code to reduce load times. Minification removes unnecessary characters such as comments, newlines and whitespace. However, minification makes it difficult for developers to debug code as we can no longer step through and read the code. JavaScript source maps are useful for debugging minified JavaScript files as they provide a map back to the original source.
21 | 22 |To create a JavaScript source map, download Google Closure Compiler which will build the .map file for you.
23 | 24 |Run Closure Compiler with Source Map Properties.
25 |java -jar compiler.jar --js common.js --create_source_map ./common.js.map --source_map_format=V3 --js_output_file common.min.js
26 | Add a sourceMappingURL with the name for a map file to the bottom of your JS minified file.
27 |//@ sourceMappingURL=common.js.map
28 |
29 | In Chrome Developer Tools, go to the "Settings" menu and within the "General" tab activate "Enable Source Maps".
30 | 31 |Now when you debug your JavaScript, you can use the unminified version to see what's really going on.
32 | -------------------------------------------------------------------------------- /secret/debugging-watching-values.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Watching Values 7 | order: 20-00500 8 | browsers: 9 | - chrome 10 | - firefox 11 | - internet-explorer 12 | - opera 13 | - safari 14 | - firebug 15 | categories: 16 | - debugging 17 | parent: debugging 18 | tags: 19 | - secret 20 | --- 21 | 22 |A common tool with .NET development, 'watch' allows you to monitor a list of variables from one handy area, at the top of the right hand bar on the "scripts" tab. Watching a variable is really easy, just type in the name of the variable and 'watch' will keep its value up to date.
23 | 24 | -------------------------------------------------------------------------------- /secret/debugging-xhr-breakpoints.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: XHR Breakpoints 7 | order: 20-00450 8 | browsers: 9 | - chrome 10 | - firebug 11 | categories: 12 | - debugging 13 | parent: debugging 14 | tags: 15 | - secret 16 | --- 17 | 18 |Within Chrome, it's possible to place a breakpoint on a XmlHttpRequest allowing you to debug AJAX requests. You can add a breakpoint by going to the "Sources" tab and selecting "XHR Breakpoints". Click the plus icon and type part or all of the URL you wish to add a breakpoint for. The breakpoint will occur once the request has been returned, allowing you to find out what data has been returned and step through what happens next.
19 | 20 |The breakpoint can be turned off by unchecking the box, or deleted by right clicking and selecting "Delete Breakpoint".
21 | 22 |Firebug allows breakpoints on XHRs by selecting the "break-on-next" button in the Network tab to break on the next one, or by right-clicking and choosing "Break on XHR". You can optionally choose a breakpoint condition as well.
23 | -------------------------------------------------------------------------------- /secret/editing-drag-and-drop-to-rearrange-elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Drag and Drop to Rearrange Elements 7 | order: 15-00600 8 | browsers: 9 | - chrome 10 | - safari 11 | - opera 12 | categories: 13 | - editing 14 | parent: editing 15 | tags: 16 | - secret 17 | --- 18 | 19 |In the Elements interface of Chrome, Safari and Opera, it is possible to drag and drop elements in to a different order. Simply click and hold on the element you wish to move and drag to where you wish to move it to. A line will appear showing where it will be placed.
20 | 21 | 22 | -------------------------------------------------------------------------------- /secret/editing-incrementing-css-values.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Incrementing CSS Values 7 | order: 15-00500 8 | browsers: 9 | - chrome 10 | - firefox 11 | - internet-explorer 12 | - opera 13 | - safari 14 | - firebug 15 | categories: 16 | - editing 17 | parent: editing 18 | tags: 19 | - secret 20 | --- 21 | 22 |If you have an element which you need to modify the margin, padding, width or height for, you can use the cursor keys to increment/decrement the size. Simply use the up and down cursor keys to increment/decrement by a unit of 1.
23 | 24 |You can increment/decrement by a unit of 10 by holding the "Shift" key whilst pressing the up and down cursor keys; and you can increment/decrement by a unit of 0.1 hold the "Alt" key whilst pressing the up and down cursor keys.
25 | 26 |You can also increment/decrement by a unit of 100 by holding down the "Shift" key whilst pressing Page-Up and Page-Down.
27 | 28 |These shortcuts are especially helpful when you are unsure of exactly what the correct size should be.
29 | 30 | -------------------------------------------------------------------------------- /secret/editing-styling-active-hover-focus-visited-states.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Styling :active, :hover, :focus, :visited States 7 | order: 15-00600 8 | browsers: 9 | - chrome 10 | - firebug 11 | - firefox 12 | - opera 13 | - safari 14 | categories: 15 | - editing 16 | parent: editing 17 | tags: 18 | - secret 19 | --- 20 | 21 |Styling CSS in the Developer Tools is great, but becomes a little more tricky when testing other psuedo-classes such as hover. Thankfully, there is a solution.
22 | 23 |Chrome has a button built for this purpose. In the “Elements” tab’s right hand column look for the dotted element/cursor icon which allows you to try other states.
24 | 25 |
For Firebug, in the right hand column click the arrow menu beside the Style tab and selected your desired state. Firebug does not offer a :visited state option.
28 | 29 |
Firefox provides a small drop down next to the DOM element selected when it is clicked in "inspect" mode. Alternatively, you can right click on the element in the DOM. Firefox does not offer a :visited state option.
32 | 33 |
In Opera, it’s the icon that looks like a list under “Styles”. In addition, Opera offers a :link and ::selection option. In Opera Next, it is found in the same place as Chrome.
36 | 37 |
In Safari, right clicking on an element in the DOM view will show a meny bar where "Force Psuedo-Classes" is an option.
40 | 41 |
Authoring CSS with a preprocessor comes with a number of advantages, but can be tricky to work with when you want to play with changes in your browser DevTools. For example, changes saved to the compiled CSS in the DevTools can be overwritten when you run Sass again which isn't ideal. With SASS 3.3 and above (which you can currently install using `sass gem install sass --pre`), it's easy to create mappings to your SASS files so you can easily save changes on the fly without needing to worry.
22 | 23 |Firstly, add the --sourcemap to your SASS watch command. Like so:
sass --watch scss/devtoolsecrets.scss:css/devtoolsecrets.min.css --style compressed --sourcemap
26 |
27 | Next, add a sourceMappingURL with the name of map file to the bottom of your SASS file. For example:
28 | 29 |/*@ sourceMappingURL=devtoolsecrets.css.map */
30 |
31 | Next, you need to have enabled the "Experiments" tab. If you haven't already, navigate to chrome://flags and enable the option marked "Enable Developer Tools experiments". You'll need to press "Relaunch Now" button at the bottom of the page to apply your changes. Go to the "Settings" panel of Chrome Developer Tools by clicking the cog on the bottom right.
32 | 33 |Click the "General Tab" and activate "Enable Source Maps". Click the "Experiments" tab and check the option "Support for SASS".
34 | 35 |After restarting your browser, you will now be able to view the line numbers of the SASS files directly.
36 | 37 | 38 | -------------------------------------------------------------------------------- /secret/extensions-override-geolocation.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-23 7:06:05 3 | layout: secret 4 | published: true 5 | 6 | title: Override Geolocation 7 | authors: 8 | - Thomas Gratier # Your name. 9 | order: 90-50000 10 | browsers: 11 | - firefox 12 | parent: extensions 13 | categories: 14 | - extensions # can be multiple 15 | tags: 16 | - secret # do not remove 17 | --- 18 |In Firefox, the API location can be overidden like in Chrome. In this case, you have to rely on the Geolocater addon. Install it from the official Mozilla addon website.
19 |After installation, go to "Tools" menu, "Geolocater", "Manage". From here, you will be able to directly add a "fake" geolocation by browsing a map or searching place. After, you will be able to override geolocation and switch between predefined geolocations. You can confirm the behaviour, going to the html5demos for Geolocation
20 | -------------------------------------------------------------------------------- /secret/general-dock-the-developer-tools-to-aid-responsive-design.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-03 23:30:00 3 | layout: secret 4 | published: true 5 | 6 | title: Dock the Developer Tools to Aid Responsive Design 7 | authors: 8 | - Ian Crowther 9 | - Andi Smith 10 | order: 00-00610 11 | browsers: 12 | - chrome 13 | - firefox 14 | - opera 15 | - firebug 16 | categories: 17 | - general 18 | parent: general 19 | tags: 20 | - secret 21 | --- 22 | 23 |When debugging mobile sites, docking to the right makes good use of the space available to you, and allows you to quickly change the space shared between the Developer Tools and the browser view area to try different widths.
24 | 25 |In Chrome Developer Tools and Opera, the bottom left icon allows you to change the dock settings of your Developer Tools. A single click switches between docking at the bottom and the right.
26 | 27 |
In Chrome Developer Tool settings under the "General" tab, you can also change the appearance of the tools so that panels are split vertically.
30 | 31 |In Opera also you can split the panels vertically under the "General" tab of settings.
32 | 33 |In Firefox Aurora, you can also dock to right and take advantage of this trick.
34 | 35 |Firebug was the first to offer this trick.
36 | -------------------------------------------------------------------------------- /secret/general-finding-the-development-tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Finding the Developer Tools 7 | order: 00-00100 8 | browsers: 9 | - chrome 10 | - firefox 11 | - internet-explorer 12 | - opera 13 | - safari 14 | - firebug 15 | categories: 16 | - general 17 | parent: general 18 | tags: 19 | - secret 20 | --- 21 | 22 |If Developer Tools are a complete secret to you, you may have had difficulty finding them!
23 | 24 |As well as a menu shortcut, you can access the Developer Tools easily either pressing "F12" in Windows or "Cmd" ⌘, "Option" ⌥ and "I" on the Mac, or by right clicking on the page and selecting “Inspect Element”. 25 | 26 |
In Safari, you will need to enable the Developer Tools by checking the option in Preferences > Advanced > Show Develop Menu first.
27 | 28 |In Opera, you will need to enable Developer Tools by checking the option in More Tools > Enable developer tools.
29 | 30 |Since Firebug is an extension for Firefox, you will need to install the add on from http://getfirebug.com/
31 | -------------------------------------------------------------------------------- /secret/general-learn-the-keyboard-shortcuts.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Learn the Keyboard Shortcuts 7 | order: 00-00900 8 | browsers: 9 | - chrome 10 | - internet-explorer 11 | - firefox 12 | - opera 13 | categories: 14 | - general 15 | parent: general 16 | tags: 17 | - secret 18 | --- 19 | 20 |By learning the keyboard shortcuts, it can be easier to navigate around the Developer Tools.
21 | 22 |Chrome's keyboard shortcuts are listed in the settings menu, found by clicking the cog icon on the bottom right of the page. Pressing "Cmd" ⌘, Shift and / on Chrome will bring up the keyboard shortcuts list and also doubles up as a quick way to navigate to settings.
23 | 24 |Internet Explorer's keyboard shortcuts are available online.
25 | 26 |The shortcuts of the Firefox Developer tools are listed on MDN. 27 | 28 |
Opera's keyboard shortcuts are also found in the settings menu, found by clicking the cog icon on the right side of the docking bar.
29 | -------------------------------------------------------------------------------- /secret/general-undocking-and-moving-the-developer-tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Undock and Move the Developer Tools 7 | order: 00-00600 8 | browsers: 9 | - chrome 10 | - firefox 11 | - safari 12 | - firebug 13 | - firefox 14 | categories: 15 | - general 16 | parent: general 17 | tags: 18 | - secret 19 | --- 20 | 21 |Sometimes we do not wish to dock our tools at the bottom of the screen, as they are in the way. Most of the Developer Tools offer another option for docking.
22 | 23 |In the Chrome Developer Tools, the bottom left icon allows you to change the dock settings of your Developer Tools. A quick click switches between docking at the bottom and the right. A held click allows you to select your docking option - including docking them in a new window. You can also click and drag an empty area of the tab bar to move the Developer Tools in Chrome.
24 | 25 |In the Firefox and Safari Developer Tools, the dock option can be found in the top left next to the close button is the option to undock the tools in to a new window.
26 | 27 |If you dock Safari's Developer Tools in to a new window, you are presented with an option to re-dock against the bottom and the left of the browser window; but at present the Developer Tools need to be undocked before they can be moved.
28 | 29 |To change the docked position, click the down arrow next to Firebug’s icon in the main toolbar, followed by “Firebug UI Location”. You will have multiple choices for top/bottom/left/right/detached. Firebug also has icons in the upper right corner to quickly change, or to minimize and close.
30 | 31 |The Firefox DevTools have docking icons in the top left corner of the toolbar for switching between bottom and right, and for expanding into a separate window.
32 | -------------------------------------------------------------------------------- /secret/general-use-the-latest-developer-release.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Use the Latest Developer Release 7 | order: 00-00500 8 | browsers: 9 | - chrome 10 | - firefox 11 | - safari 12 | categories: 13 | - general 14 | parent: general 15 | tags: 16 | - secret 17 | --- 18 | 19 |The developer tools are constantly being improved and often the pre-release versions of browsers can offer you something extra.
20 | 21 |Chrome Canary is the experimental version of Chrome. Canary can be run side by side with Chrome so you can check for issues in the current release at the same time.
22 | 23 |You can further enhance your Chrome Developer Tools by visiting the URL chrome://flags and enabling the option marked "Enable Developer Tools experiments". Don't forget to hit the "Relaunch Now" button at the bottom of the page to apply your changes.
24 | 25 |
Firefox Aurora offers a preview of the latest features of Firefox. Unfortunately, Aurora cannot be open at the same time of Firefox.
28 | 29 |
Webkit Nightly is a nightly release of Safari. As it's a nightly release, it is less stable than the other browsers. But with Safari's Developer Tools in their current mess in the production release, the nightly release fixes a large proportion of these problems giving you a usable experience. Webkit Nightly can be run side by side with Safari to check for rendering issues.
32 | 33 |
Now browser release cycles are as frequent as 12 weeks and browsers auto-update, changes are incremental and less likely to be breaking; and it won't be long (>12 weeks) before your users are using these versions. It's important to test on both the current and developer versions where possible.
-------------------------------------------------------------------------------- /secret/inspect-inspect-fonts.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Inspect Fonts 7 | authors: 8 | - Andi Smith 9 | order: 10-01000 10 | browsers: 11 | - firefox 12 | - firebug 13 | categories: 14 | - inspecting 15 | beta: true 16 | parent: inspecting 17 | tags: 18 | - secret 19 | --- 20 | 21 |Firefox comes with a built in font inspector, that allows you to see the fonts used on the element you are currently inspecting.
22 | 23 |
You can modify the default "Abc" text to try the font with any text you would like. At the bottom of the fonts list is a button to display all fonts on the page, allowing an easy way to see exactly what fonts are being used on the page.
26 | 27 |Firebug provides an info tips for any font declaration that appears in CSS.
28 | 29 |
When you are inspecting nodes in the DOM tree, a breadcrumb list of the nodes' DOM path is displayed within the Developer Tools.
24 | 25 |In Chrome and Opera, this is displayed at the bottom of the DOM inspector.
26 | 27 |
In Firebug, Firefox and Safari, this is displayed at the top of the DOM inspector.
30 | 31 |
You can navigate the breadcrumb either directly by clicking on one of the nodes, or by pressing the arrow keys. Pressing the left arrow key will take you to the parent, while pressing the right arrow key will navigate to the first child item. You can move to the next or previous child by pressing the up and down arrow keys. If there are no more children, the up and down arrows will navigate back up to DOM tree.
34 | 35 |In Firefox, you can right click on a breadcrumb to see a list of all sibling nodes allowing you to quickly navigate to a sibling.
36 | 37 |In Safari, you can left click on a breadcrumb to see a list of all sibling nodes.
38 | -------------------------------------------------------------------------------- /secret/inspect-search-for-dom-nodes.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-03 23:45:00 3 | layout: secret 4 | published: true 5 | 6 | title: Search for DOM Nodes 7 | authors: 8 | - Andi Smith 9 | order: 10-00410 10 | browsers: 11 | - chrome 12 | - firefox 13 | - opera 14 | categories: 15 | - inspecting 16 | parent: inspecting 17 | tags: 18 | - secret 19 | --- 20 | 21 |In Firefox, you can search for a particular DOM node anywhere in a document from within the "Inspector" panel. This feature is available to the right of the DOM breadcrumb navigation and hidden as a small search box.
22 | 23 |
The search box expands when in focus.
27 | 28 |
Typing in a matched selector will automatically highlight it in the DOM tree.
31 | 32 |In Chrome and Opera, you can press Ctrl-F to open the Find dialog. CSS selectors work as expected.
33 | 34 |
Each Browser Developer Tool contains its own box model tool - useful for viewing width, height, margin and padding on any element you select.
22 | 23 | TODO: write more -------------------------------------------------------------------------------- /secret/inspect-viewing-your-site-as-responsive.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Viewing Your Site as Responsive 7 | authors: 8 | - Andi Smith 9 | order: 10-02000 10 | browsers: 11 | - chrome 12 | - firefox 13 | - opera 14 | categories: 15 | - inspecting 16 | parent: inspecting 17 | tags: 18 | - secret 19 | --- 20 | 21 |In the age of responsive design, it's important to see how our sites will look on devices of any size. Although we can resize the browser, there are some additional tools available to us in the Developer Tools.
22 | 23 |Within the 'Settings' panel of the Chrome Developer Tools (located by clicking the cog in the bottom right corner of the tools) under 'Overrides' you will find 'Device Metrics' which allows you to specify a width and height, together with a font scale size. You can also dock the Developer Tools to the right of the page and resize them to the size you want to test.
24 | 25 |In Opera Developer Tools also you can change the width and height using 'Device Metrics' menu under 'Overrides' tab of 'Settings'.
26 | 27 |The Firefox Developer Tools include a tool to check your site in any dimension. The 'Responsive Design Mode' tool can be found in the top right header of the Developer Tools. Opening it provides you with a number of preset sizes and an option to add additional ones to cater for your needs. Firefox also provides an option to rotate your dimensions so you can test both landscape and portrait.
28 | -------------------------------------------------------------------------------- /secret/inspect-viewing-your-site-in-3d.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Viewing Your Site in 3D 7 | authors: 8 | - Andi Smith 9 | order: 10-05000 10 | browsers: 11 | - firefox 12 | categories: 13 | - inspecting 14 | parent: inspecting 15 | tags: 16 | - secret 17 | --- 18 | 19 |The Firefox Developer Tools allow you to view your site in 3D, inspecting what elements belong to which parent elements and provided a handy visual representative of how elements are nested. To access it, click the Cube icon on the top right of the developer tools.
-------------------------------------------------------------------------------- /secret/mobile-using-developer-tools-on-android.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-03 00:20:00 3 | layout: secret 4 | published: true 5 | 6 | title: Using Developer Tools on Android 7 | authors: 8 | - Andi Smith 9 | order: 80-02000 10 | browsers: 11 | - chrome 12 | - firefox 13 | categories: 14 | - mobile 15 | parent: mobile 16 | tags: 17 | - secret 18 | --- 19 | 20 |You can use Chrome Canary's Developer Tools on your Mac to debug public and locally hosted websites on your Android device, allowing you access on your mobile phone to all of Chrome Developer Tools' extensive feature set.
21 | 22 |First, you need to install Chrome BETA on your Android device.
23 | 24 |Next, you will need to download the ADB plugin extension and install it on your Chrome Canary instance. As it has not been downloaded from the Google Play store, you will need to drag the file in to the Extensions page found at chrome://extensions/ within Chrome Canary.
25 | 26 |Ensure you have "Enable Developer Tools experiments" turned on within chrome://flags.
27 | 28 |Plug your mobile phone in to the USB port on your machine. Now on your mobile phone go to the "Settings" app. Select "Developer Options" and ensure "USB debugging" is checked. If it is already checked and you have not used USB debugging on this computer before, uncheck it and check it again to ensure it has this computers' MAC address.
29 | 30 |
Now go in to Chrome BETA for Android and click the menu icon and "Settings". Under "Developer tools" ensure "Enable USB Web debugging" is enabled. Open a new tab.
33 | 34 |
In Chrome Canary, click on the ADB plugin icon and click "Start ADB". You may need to restart your browser for it to work.
37 | 38 |
Visit the Inspect page found at chrome://inspect. Find the device (which should be running Chrome Canary 28 or abobe) and find the tab you were looking for. Click the "Inspect" link that appears to the right of the page URL.
41 | 42 |
In the window that pops up, go to "Settings", and click the "Experiments" tab. Enable "Reverse Port Forwarding". You may need to restart your Dev Tools by closing the window and re-clicking the "Inspect" link before the "Port Forwarding" tab appears.
45 | 46 |
In the Port Forwarding tab, enter the port you wish to forward (e.g. 9000) and the address and port it should map to on your local machine. Now, on your mobile device type in the URL localhost:port (e.g. localhost:9000). Your local site should now load on the device and be available for debugging.
49 | 50 |
59 |
60 | adb forward tcp:6000 tcp:6000
61 |
62 |
63 | Connect your iOS device to an available Mac. Open both Safari on your Mac and iOS device.
20 | 21 |Go to Safari's "Develop" menu and after the first menu divider should be the name of the iOS device you are trying to access. Within the sub menu, select the page you want to debug.
22 | 23 |Safari's Developer Tools will appear in a pop up window allowing you to debug the mobile site that appears on the device.
-------------------------------------------------------------------------------- /secret/performance-checking-domcontentloaded-and-loadevent.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Checking DOMContentLoad and Load Event 7 | order: 60-00260 8 | browsers: 9 | - chrome 10 | - firebug 11 | - safari 12 | categories: 13 | - performance 14 | parent: performance 15 | tags: 16 | - secret 17 | --- 18 | 19 |The network timeline for Chrome and Safari (and Net panel for Firebug) displays information to show how quickly the page has loaded, displaying lines for both when DOMContentLoaded is fired and when the load event is fired.
20 | 21 |DOMContentLoaded indicates when the browser has finished parsing the document (but other resources such as images and stylesheets may/may not have been downloaded). It is represented as a blue line.
The load event fired will occur once all the initial resources (images, stylesheets, JavaScript) have been downloaded. It is represented as a red line.
If the two events fire at the same time, the line will be purple.
In Safari, the lines are dashed rather than solid.
30 | -------------------------------------------------------------------------------- /secret/performance-disable-the-browser-cache.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Disable the Browser Cache 7 | order: 60-00150 8 | browsers: 9 | - chrome 10 | - firefox 11 | - internet-explorer 12 | - opera 13 | - safari 14 | - firebug 15 | categories: 16 | - performance 17 | parent: performance 18 | tags: 19 | - secret 20 | --- 21 | 22 |Each browser allows you to disable cache of your webpage, ensuring your resources come from the server each and every time.
23 | 24 |In Chrome, you'll find the option in the settings cog.
25 | 26 |In Internet Explorer, the option is under "Cache" in the menu bar.
27 | 28 |In Opera, to clear the cache click the Network tab, select the Network Options secondary tab and choose the first option.
29 | 30 |In Safari, you can disable your browser cache under the Develop menu in the menu bar.
31 | 32 |In Firebug, you can disable your browser cache under the menu in the Net tab.
33 | 34 |To bring up the clear cache (and other data) dialog on any browser press Ctrl, Shift and Delete in Windows, and press Shift, Cmd and Backspace on Mac.
35 | -------------------------------------------------------------------------------- /secret/performance-export-the-network-timeline-as-har.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Export the Network Timeline as HAR File 7 | order: 60-00250 8 | browsers: 9 | - chrome 10 | - firebug 11 | categories: 12 | - performance 13 | parent: performance 14 | tags: 15 | - secret 16 | --- 17 | 18 |HAR (HTTP Archive) files can be used for a variety of performance analysis techniques, and also for debugging. HAR files can be attached to a bug raised during testing - the developer then can run the HAR data locally to find out what went wrong.
19 | 20 |We can export our network tab timeline to HAR from the Chrome Developer Tools by right clicking on the network output and seleving "Save as HAR with Content".
21 | 22 |Firebug requires the installation of another add-on called Net-export, created by the lead Firebug developer and the creator of the HAR format.
23 | 24 |chromeHAR is an online tool that provides the same timeline interface as Chrome and can be used for this purpose.
25 | -------------------------------------------------------------------------------- /secret/performance-measure-rendering-performance-and-fps.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-06-03 23:20:00 3 | layout: secret 4 | published: true 5 | 6 | title: Measure Rendering Performance and FPS 7 | authors: 8 | - Andi Smith 9 | order: 60-03000 10 | browsers: 11 | - chrome 12 | categories: 13 | - performance 14 | parent: performance 15 | tags: 16 | - secret 17 | --- 18 | 19 |Chrome provides a frame rate timeline enabling the ability to debug a site on a frame by frame basis.
20 | 21 |To create a Frames timeline, first open the Chrome Developer Tools and select the "Timeline" tab. At the bottom of the tab are a number of icons including a black circle which represents 'record'. Press this once to enable recording of the timeline and a second time to stop the recording. Whilst recording, you can interact with the page in the usual manner and Frames mode will record all the frames of action.
22 | 23 |
Each bar along the timeline graph represents a single frame of animation, and are coloured as follows: blue for loading tasks, yellow for scripting tasks, purple for rendering tasks and green for painting tasks. The white area represents idle time.
26 | 27 |
Below the timeline graph is a waterfall diagram of how the page performed. Frames are shown in the header columns, with the number of milliseconds it took to draw the frame in the header cell; while records of the actions taken are shown down the left side.
30 | 31 |You can drag the two grey mouse sliders to change the number of frames of the timeline you wish to inspect.
32 | 33 |Hovering the header rows on the timeline reveals the duration of the frame; the FPS count; the CPU time and the aggregated time of actions within the frame.
34 | 35 |Hovering over records on the left, you can see a breakdown of the duration of each task; together with other useful information. The part of the page should also be highlighted, if relevant. Some tasks are grouped and can be inspected by clicking the arrow within the waterfall diagram.
-------------------------------------------------------------------------------- /secret/performance-replay-a-xhr-network-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Replay a XHR Network Request 7 | order: 60-00400 8 | browsers: 9 | - chrome 10 | - firebug 11 | categories: 12 | - performance 13 | parent: performance 14 | tags: 15 | - secret 16 | --- 17 | 18 |If you wish to re-run an XHR request without having to reload the page or rerun the event, you can right click on the resource and and select "Replay XHR" ("Resend" in Firebug).
19 | -------------------------------------------------------------------------------- /secret/performance-sort-the-network-timeline.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2013-01-01 00:00:00 3 | layout: secret 4 | published: true 5 | 6 | title: Sort Network Requests to Find Bottlenecks 7 | order: 60-00200 8 | browsers: 9 | - chrome 10 | - firefox 11 | - internet-explorer 12 | - safari 13 | categories: 14 | - performance 15 | parent: performance 16 | tags: 17 | - secret 18 | --- 19 | 20 |The Network tab shows resources in the order each network request was started, clicking a column within the Network tab, you can reorganise data based the column value.
21 | 22 |Most of the browsers share common fields in their Network tabs. You can sort by fields such as the filename; domain; the type of resource; the HTTP status; the method and the size of the resource.
23 | 24 |Filename and Domain are combined in Internet Explorer.
25 | 26 |Chrome takes this a step further and allows you to click on the "Timeline" header to show an additional range of sorting options.
27 | 28 |