Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Chrome Developer tools

No description

ted kim

on 29 March 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Chrome Developer tools

Google Chrome
Developer Tools ted.kim@obigo.com OverView overview The Developer Tools, bundled and available in Chrome, allows web developers and programmers deep access into the internals of the browser and their web application. The Developer Tools are heavily based on the WebKit Web Inspector, a part of the open source WebKit project. This overview of the Developer Tools points out its most popular and useful features. The target audience are web developers who don't know of, or have not yet investigated, the Developer Tools. However, we are sure that even if you are an experienced web developer, you will pick up a tip or two. Windows(panels) 1. Element
2. Resources
3. Network
4. Scripts 5. Timeline
6. Profiles
7. Audits
8. Console 1. Element panel Element panel에서는 현재 웹페이지의
DOM구조, CSS 스타일, HTML 모양을
확인할 수 있다. 2. Resource panel Resource panel에서는 현재 웹페이지에
로딩되어 있는 Resourc를 확인할 수 있다.
Resource는 단지 이미지뿐만 아니라
HTML5 Database, LocalStorage, Cookie
AppCache등이 포함된다. 3. Network panel Network panel에서는 웹페이지나, 웹페이지에
있는 Resource등이 웹서버로부터 로딩된 시간이나
사용한 대역폭등을 체크할 수 있다. 4. Sources panel Javascript Debugging이 가능하다. 5. Timeline panel 웹 페이지의 시간 정보를 알 수 있다.
예를 들어 DOM Event 시간,
페이지 레이아웃 렌더링 시간,
윈도우 페인트 시간을 알 수 있다. 6. Profile panel 자바스크립트 성능 분석을 할 수 있다.
CSS 셀렉터 성능 분석을 할 수 있다.
메모리 관련 성능 분석을 할 수 있다. 7. Audits 웹 페이지의 최적화를 Consulting 해준다. 8. console 자바스크립트를 동적으로 실행할 수 있으며
console api를 사용해 web page를
테스트 할 수 있다. 1. Elements Panel Overview - The Elements panel lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements.
- The Elements panel is sometimes a better way to "view source" for a page DOM Element Tree 1. inline scripts and styles syntax highlight
2. add, edit, or delete attributes for the selected DOM element
3. Tab will iterate over the editable attributes
4. drag-and-drop an element CSS 1. very useful
2. add, edit, disable selected DOM Element's style
3. you can check final computed style
4. Autocompletion suggestions will appear while editing property
5. The new property will be added immediately
6. you can edit color value by PageUp/Down or Up/Down key BoxModel This lets you edit any of the absolute, relative, or fixed CSS box model metrics Properties From here you can edit the element's DOM properties. Deleting all the text deletes the property, if allowed. DOM Breakpoints You can add breakpoints that fire on DOM modifications related to a certain element. Event Listeners The event listeners shown for the selected node 1. you can see linked css file if allowed
2. Some properties can have exclamation marks
( ) next to their names. This means that the property name and/or value is not understood by the browser, so the property is ignored (as per the CSS specification).
3. when you see resource's URL, you can check it in Resource panel Final Computed Style 2. Resources Panel Overview The Resources panel lets you inspect resources that are loaded in the inspected page. It lets you interact with HTML 5 Database, Local Storage, Cookies, AppCache, etc. Frame resources you can check resources in frame HTML5 Database you can query data from html5 database 3. Network Panel Overview The Network panel lets you inspect resources that are downloaded over the network. ! ! ! ! start summary event resource
color resource
info 4. Source Panel resource
info 5. Timeline Panel Overview The Timeline panel gives you a complete overview of where time is spent when loading and using your web app or page. All events, from loading resources to parsing JavaScript, calculating styles, and repainting are plotted on a timeline. DOMContentLoaded &
LoadingDone Loading - blue
Scripting - yellow
Rendering - purple 6. Profile Panel Overview The Profiles panel lets you profile the execution time and memory usage of a web app or page. The Profiles panel includes two profilers: a CPU profiler and a Heap profiler. These help you to understand where resources are being spent, and so help you to optimize your code: 7. Audits Panel Overview The Audits panel consult your web page. 8. Console Overview The JavaScript Console provides two primary functions for developers testing web pages and applications:

- A place to log diagnostic information using methods provided by the Console API, such as console.log(), or console.profile().

- A shell prompt where you can enter commands and interact with the document and the Chrome DevTools. You can evaluate expressions directly in the Console, and can also use the methods provided by the Command Line API, such as $() command for selecting elements, or profile() to start the CPU profiler. Using console 1. Writing log var a = document.createElement('p');
console.log("Node count: " + a.childNodes.length); 2. error & warning function connectToServer() {
console.error("Error: %s (%i)", "Server is not responding",500);
connectToServer(); if(a.childNodes.length < 3 ) {
console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
} 3. assert console.assert(list.childNodes.length < 500, "Node count is > 500"); 4. filtering 5. grouping var user = "jsmith", authenticated = true, authorized = true;
// Top-level group
console.group("Authenticating user '%s'", user);
if (authenticated) {
console.log("User '%s' was authenticated", user);
// Start nested group
console.group("Authorizing user '%s'", user);
if (authorized) {
console.log("User '%s' was authorized.", user);
// End nested group
// End top-level group
console.log("A group-less log trace."); 6. time console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
console.timeEnd("Array initialize"); function AddResult(name, result) {
console.timeStamp("Adding result");
var text = name + ': ' + result;
var results = document.getElementById("results");
results.innerHTML += (text + "<br>");
} 이걸 왜 이제 알았을까 Fin ted.kim@obigo.com
Full transcript