Firefoxтогу Элементти текшерүү куралы веб -баракчаңызда көргөн нерсеңиздин HTML кодун тактап алууга мүмкүндүк берет. HTML жана аны коштогон CSS стили бул куралдар ачык болгондон кийин толук оңдолот. Өзүңүзгө жаккан бардык өзгөртүүлөрдү сынап көрүңүз, анан веб -баракчанын күтүлгөн көрүнүшүнө кайтуу үчүн баракты жаңылаңыз.
Кадамдар
2 ичинен 1 -бөлүк: Элементтерди текшерүү
Кадам 1. Веб-баракчанын каалаган элементин оң баскыч менен чыкылдатыңыз
Сиз сүрөттөрдү, текстти, фондорду же башка элементтерди оң баскыч менен чыкылдата аласыз. Эгерде сизде эки баскычтуу чычкан жок болсо, Control баскычын басып туруп, сол баскычты басыңыз.
Кадам 2. чыкылдатуу менюсунан Элемент Текшерүү
Куралдар тилкеси терезеңиздин ылдый жагында пайда болушу керек. Куралдар тилкесинин астында панелдин HTML кодун көрсөтүүчү панель да пайда болот.
Кадам 3. Куралдар тилкесин жана айнектерди аныктаңыз
Элементти Текшерүү баскычын басканда, терезеңиздин түбүндө бир нече панелдер ачылат. Бул жерде алардын колдонулушу жана аталыштары боюнча бөлүштүрүү:
- Жогорку сап - инструменттер панели. Бул бир нече иштеп чыгуучу куралдарга ээ, бирок бизди сол жактагы инспектор кызыктырат. Бул жол көрсөткүч үчүн бул тандалганды (көк менен белгиленген) сактаңыз.
- Куралдар тилкесинин астында, тандалган элементке тиешелүү толук жолду көрсөтүүчү HTML элементтеринин бир эле Breadcrumbs сабы бар.
- Бул саптын астындагы панель HTML дарагын же беттин "Белгилөө көрүнүшүн" көрсөтөт. Сиз тандаган элементтин HTMLи бул панелде баса белгиленип, борборлоштурулган.
- Оң жактагы панель бул барактын CSS стилин көрсөтөт.
Кадам 4. Башка элементти тандаңыз
Куралдар панели ачылгандан кийин, башка элементти тандоо оңой болот. Бул жерде муну кылуунун үч жолу бар:
- Тиешелүү элементти белгилөө үчүн HTML линиясынын үстүнө алып келиңиз (Firefox 34+ талап кылынат). Ошол элементти тандоо үчүн HTML чыкылдатыңыз.
- Куралдар тилкесинин эң сол жагындагы Элемент тандоо куралын чыкылдатыңыз: сөлөкөт - төрт бурчтуктун үстүндөгү курсор. Элементтерди белгилөө үчүн курсорду беттин үстүнө жылдырып, андан кийин элементти тандоо үчүн чыкылдатыңыз.
Кадам 5. Код аркылуу чабыттоо
HTML панелиндеги каалаган жерди басыңыз. Код аркылуу өтүү үчүн клавиатураңыздын сол жана оң жебелерин колдонуңуз (Firefox 39+ талап кылынат). Бул кол менен тандоо үчүн өтө кичине элементтер үчүн пайдалуу.
- Боз HTML бетте көрсөтүлбөгөн элементтерге тиешелүү. Бул CSS дисплейинин касиети менен жашырылган комментарийлерди, айрым түйүндөрдү жана элементтерди камтыйт.
- Контейнерлердин сол жагындагы жебени чыкылдатып, мазмунун кеңейтүү же жашыруу. Бардык мазмунду кеңейтүү үчүн, чыкылдатып жатканда alt="Image" же параметрди кармап туруңуз.
Кадам 6. Элементти издөө
Breadcrumbs катарынын эң оң жагында издөө тилкесин (лупанын сөлөкөтү) издеңиз. Аны кеңейтүү үчүн чыкылдатыңыз, андан кийин сиз издеп жаткан HTML кодун териңиз. Сиз терип жатканда, дал келген элементтерди камтыган калкыма терезе пайда болот. Ошол элементти тандоо үчүн бирин чыкылдатыңыз жана HTML панелин анын кодуна жылдырыңыз.
2 ичинен 2 бөлүк: HTML түзөтүү
Кадам 1. Каалаган убакта кайра баштоо үчүн баракты жаңылаңыз
Эгерде сиз веб -иштеп чыгуучу куралдарга жаңыдан кирсеңиз, алар эч кандай туруктуу өзгөрүүлөрдү жасабасын түшүнүңүз. Сиздин түзөтүүлөрүңүз экраныңызда гана көрүнөт, жана сиз баракты жаап же жаңыртмайынча. Эмне болорун билбесеңиз да, эксперимент жасоодон тартынбаңыз.
Кадам 2. Текстти түзөтүү үчүн HTMLге эки жолу чыкылдатыңыз
HTML линиясын эки жолу чыкылдатыңыз. Жаңы текстти териңиз жана өзгөртүүлөрдү сактоо үчүн enter басыңыз.
Кадам 3. Click жана көбүрөөк жолдор үчүн Breadcrumb кармап
Эсиңизде болсун, Breadcrumb куралдар тилкеси толук HTML дарагы менен жогорку панелдин ортосунда жайгашкан. Кең менюну ачуу үчүн ушул катардагы элементтердин бирин басып, кармап туруңуз. Бул жерде бул параметрлер боюнча толук эмес көрсөтмө бар:
- "HTML катары түзөтүү" түйүндү жана анын бардык мазмунун ар бир сапты жеке оңдоонун ордуна HTML дарагына түзөтүүгө мүмкүндүк берет.
- "Ички HTMLди көчүрүү" түйүндүн бардык мазмунун көчүрөт, ал эми "Сырткы HTMLди көчүрүү" түйүндү да көчүрөт (мисалы, же
- "Paste →" бул түйүндүн алдында же түйүндүн биринчи баласынан кийин кайда чаптала тургандыгы боюнча бир нече варианттарга алып келет.
- : hover,: active жана: focus колдонуучу аны менен иштешкенде, анын көрүнүшүн өзгөртөт. Так эффект CSS стиль таблицасы менен аныкталат (оң панелден оңдолот).
Кадам 4. Сүйрөп барып таштаңыз
Коддогу элементтерди кайра иретке келтирүү үчүн, чыкылдатып сызык чыкканга чейин HTMLди басып туруңуз. Аны дарактын өйдө же ылдый жылдырып, үзүлгөн сызык каалаган жерге келгенде кое бериңиз.
Бул Firefox 39 же андан кийинки версиясын талап кылат
Кадам 5. Иштеп чыгуучунун куралдар тилкесин жабыңыз
Бул кооз терезелердин бардыгын жабуу үчүн, CSS панелинин үстүндөгү куралдар тилкесинин эң оң бурчундагы X баскычын басыңыз.
Кеңештер
- Сиз ошондой эле куралдар тилкесин төмөнкү меню параметрлери менен ача аласыз:
- Windows: Firefox → Web Developer → Tools / Toggle Tools
- Mac же Linux: Tools → Web Developer → Tools / Toggle Tools
- Firefox 40 HTML түзөтүүдө сизге көбүрөөк орун берүү үчүн CSS панелин жашыруу мүмкүнчүлүгүн киргизди. Издөө тилкесинин оң жагындагы Breadcrumbs катарынын эң оң жагындагы жебе сөлөкөтүн издеңиз. CSS панелин жашыруу үчүн бул сөлөкөттү басыңыз жана аны кайра кеңейтүү үчүн дагы бир жолу басыңыз.
- CSS панели да оңдолот, бирок бул бул колдонмонун алкагына кирбейт. Бул макалада CSSтин негиздери үйрөтүлөт.
