파이어버그 같은 개발도구 사용법

안녕하세요, 작업을 하면서 크롬이나 파이어폭스(파이어버그)를 사용해서 웹표준 작업을 하는데 사용하고 있습니다.
HTML에 적용된 CSS 나 소스구조를 보는데 주로 사용하는데요, 그 정도(?)의 용도만 아니라 좀 더 다양하게 사용할수 있는 걸로 알고 있습니다. 예를 들어 HTML에 적용된 자바스크립트 함수를 바로 추적(?) 해서 본다던지, 전체 페이지 중에서 가장 많은 load 를 차지하는게 무엇인지를 볼수 있는 등등 단순히 HTML 에 사용된 CSS 추적하는 용도 뿐 아니라 많으 기능이 있다고는 알고 있는데요, 어떻게 사용을 해야 할지 잘 모르겠네요.

그냥 무턱 대로 사용하려고 해도 대충 어떤게 가능하고 어떤 건 불가능 한지 개념이라도 잡고 시작을 하고 싶은데 검색을 해도 잘 나오지 않네요.

노하후 공유를 부탁드립니다. 사이트나 책이 있으면 추천 부탁드립니다.

감사합니다.