구글 검색 결과 새 탭으로 열기

일부 웹브라우저에서는 검색 결과 클릭시 기본 설정으로 새 탭으로 지정이 되어 있어 따로 설정해 주지 않아도 됩니다.

기본 설정이나 브라우저 설정에서 변경할 수 없는 경우 구글 페이지에서 설정 가능합니다.

검색 창의 우측 상단의 [설정] >> [검색 환경설정] 클릭

"검색결과 여는 창" 부분의 [선택한 검색 결과를 새 브라우저 창에서 열기] 항목을 체크 >> [저장]

Octotree

eclipse의 Project Explorer와 비슷합니다.

깃허브에 있는 소스들을 IDE 에디터처럼 계층화시켜 왼쪽 창에 보여주며 해당 파일 항목을 클릭하면 오른쪽에 소스코드를 보여줍니다.

https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc 

우측 상단의 [+ CHROME에 추가] 버튼 클릭

[확장앱 추가]

jquery GitHub에서 본 화면

구글 썸머 오브 코드(Google Summer of Code)

·         18세 이상 학생이 참여할 수 있는 프로그램입니다.

·         참가자들은 3개월이라는 기간 동안 하나의 오픈소스 프로젝트를 집중적으로 담당하면서 오픈소스 프로젝트를 체계적으로 배워보고 실무에서 필요한 지식을 얻을 수 있습니다.

·         오픈소스 전문 업체의 개발자를 멘토로 지정해 참가자가 언제든지 질문할 수 있도록 지원하고 있습니다.

https://summerofcode.withgoogle.com/

구글 코드인(Google Code-in)

·         13세에서 17세 청소년이 참여할 수 있는 일종의 온라인 콘테스트입니다.

·         공개된 문제 중의 하나를 선택하고, 소스코드를 개선하거나 오픈소스 문서화 등에 기여하게 됩니다. 이 중 가장 많은 프로젝트를 수행하고 양질의 기여를 한 참가자에게 수료증, 티셔츠, 본사 방문 기회 등을 제공합니다.

https://codein.withgoogle.com/archive/

크롬 개발자 도구 - Elements

·         개발자 도구를 열어을 때 가장 처음 표시되는 도구입니다.

·         HTML, CSS가 잘 출력되고 동작되고 있는 지 확인 할 수 있는 기능을 제공해 주며 다양한 방법으로 속성을 추가/제거 및 변경할 수 있게 해 줍니다.

·         디버깅을 위해 기능을 테스트하거나 속성을 변경 할 때 사용합니다.

HTML구조가 보이고 화살표를 펼치고 접어서 트리된 HTML구조를 탐색할 수 있습니다.

하단에는 선택 요소의 계층 정보를 확인할 수 있습니다.

Styles

특정 요소를 선택하고 오른쪽 창을 보면 Styles탭이 보이며 여기의 정보를 수정하여 스타일을 변경해 볼 수 있습니다.

이 부분에서 CSS 디버깅을 할 수 있습니다.

오른쪽의 [+]아이콘을 클릭하여 새로운 스타일 룰을 생성할 수 있습니다.

Computed

최종 적용된 스타일 정보를 확인할 수 있습니다.

Event Listeners

선택된 요소에 적용된 이벤트 정보를 확인할 수 있습니다.

구글 검색(Google Search) - 고급검색

복잡한 검색 규칙을 통해 원하는 검색결과만 확인할 수 있습니다.

https://www.google.co.kr/advanced_search

크롬 개발자 도구 - Timeline

특정 시간동안 일어난 일을 확인할 때 사용합니다.

크롬 개발자 도구 - Profiles

성능 개선을 할 때 유용하게 사용합니다.

크롬 개발자 도구 - Audits

성능 진단 도구

크롬 개발자 도구 - 요소 검사 (Select an element in the page to inspect it)

·         화살표로된 아이콘을 클릭한 후 HTML페이지상에의 특정 영역의 요소를 선택하여 검사할 수 있습니다.

·         마우스 포인터를 가져간 선택 요소는 하이라이트되어져서 표시되고 해당 요소를 클릭하면 해당 요소의 태그정보를 Elements탭에 보여주게 됩니다.