웹 개발자 Firefox 용 툴바

웹 개발자 Firefox 용 툴바는 종종 하나의 웹 개발자를위한 도구가 설치되어 있어야합니다 중 하나로 표시됩니다. 내 설계 환경 내에서 도구 모음을 사용하는 데, 난 전체 - 냉담하게에 동의합니다. 다시 개발 시간을 시간을 잘라냅니다. 그게 지루한 작업을 거의 다 재미있을 수있게 돕는다. 그것은 신속하게 다양한 크기의 창에서 웹 사이트에서 눈에 날 수있습니다. 나야, 디버그 및 JavaScript와 CSS 코드 확인할 수있습니다.

크리스 Pederick 파이어 폭스에 대해이 도구 모음을 개발했다. 여기에서 도구 모음과 같은 모습입니다 :

참고 : 귀하의 브라우저 창 상단에 걸쳐 하나의 모음입니다. 그것은 위의 두 이미지로하므로 전체를 볼 수있습니다 표시줄에 표시됩니다.

보시다시피, 많은 옵션이 함께 제공됩니다. 비록 모든 옵션을 제공하는 도구 모음을 사용하지 않은, 날 내 친한 친구 몇 가지 목록을 보자.

실시간 CSS를 디버깅. 내 웹 페이지를 보는 동안, 난, / 편집 CSS)에 CSS를 선택하고 브라우저 창에서 즉시 결과를 볼 수가 웹 페이지 (또는 하단) 도구 모음 (왼쪽부터 나타나기 CSS 파일을 업데이트할 수있습니다. 이 문제를 해결하는 좋은 일이 핵심 본심을위한 방법을 얘기하자면 패딩들을 추가로 10 픽셀 내 웹 페이지에 영향을 미칩니다. 비록 지금 당장 내 CSS를 업데이 트를 구할 수 없다, 내가 쉽게 변화를 내가 이미 직장 내 웹 편집기에서 CSS 스타일 시트를 엽니다에 붙여 넣어 잘 알고 복사할 수있습니다.

유효성 검사기. 도구 모음의 오른쪽 상단에 빨간색으로 표시 / 녹색 버튼을 CSS 코드 및 JavaScript 코드의 유효성을 나타냅니다. 만약 버튼이 버튼 위에 마우스를 빨간색 간단히 말해서 나는 당신과 그것을 즉시 내게 그것을 찾는 오류를 알려줍니다. 오류가 콘솔에 내가 클릭하면 자세한 내용을 찾아 다시 코드 (CSS를 또는 JavaScript)로 이동, 변경, 브라우저 창을 새로 고침 단추를 (들), 바라건대, 초록색으로 변하거나 봐. 코드를 디버깅의 용이성 놀랍습니다 - 그리고 일반적으로 신속하게 해결합니다.

창의 크기를 조정할. 년부터 좋은 다른 화면 해상도에서 보는 웹 페이지를 원하는 페이지가 어떻게 서로 다른 크기의 창문 모양을 확인합니다. 개발자 툴바,이 버튼을 클릭합니다. 난 그저 및 크기 조정 옵션에서 다른 윈도우 크기를 선택 즉시 다른 창 크기에서 사이트를 볼 수있습니다.

작은 화면 렌더링. 나는 내 웹 페이지를 모바일 장치에있는 버튼을 한 번 클릭으로 어떻게 생겼는지 볼 수있습니다. 작은 화면 렌더링 옵션 기타 메뉴에서 사용할 수있습니다.

Joomla와 통합.이 좋아하는 사실 위에 나열된 첫 번째로 동일하지만, 특정 환경에서 24 시간. 웹 개발자 툴바 Joomla 환경 내에서 매우 중요한 이점입니다. 도구 모음이 없으면, 난 항상 Joomla으로 확장 이동 갈건데 / 템플릿 관리자에서 해당 템플릿을 선택하여, 내가 무슨 생각을하고 그것을 저장하는 데 필요한 변경 사항을 확인한 다음 다시 브라우저 창을로 가서 결과를 확인. 휴! 개발자 툴바, 난 그저 'CSS는'CSS는 메뉴에서, 필요한 사항을 변경하고 결과를 볼 편집을 선택합니다. 때까지 그래 난 CSS를 조정 계속할 수있습니다. 아니 앞뒤로 윈도우와 애플 리케이션 사이에. 일단 CSS가 정확한지, 난 그저 변화의 코드를 복사를 강조 표시하고 CSS를 템플릿으로 Joomla 안에 붙여 넣습니다. 그것은 빨리가. 그건 쉬워. 아주 간단한거야.

이것 툴바에서 웹 개발자를 위해 무엇을 할 수 빙산의 일각에 불과 팁을입니다. 그것은 설치가 간편하고 사용하기 쉽다. 내가 보기엔 당신의 개발 환경의 일부를 만들고 그것을 권장합니다. 그것을 사용할 수있습니다 은 https에서 : / / addons.mozilla.org/en-US/firefox/addon/60.