Детальное редактирование DOM / CSS с использованием инструментов разработчика IE9 F12: возможно? - PullRequest
7 голосов
/ 08 апреля 2011

Чтобы решить надоедливые проблемы с макетом и CSS только для IE, я пытаюсь использовать инструменты разработчика IE9 для итеративного редактирования HTML и CSS. В идеале я могу получить паритет с рабочим процессом манипулирования DOM / CSS, который я привык делать с Firebug и инспектором Webkit.

Другими словами, я хочу иметь возможность многократно редактировать HTML и CSS для отдельного элемента или группы элементов, а затем видеть мои изменения, отраженные сразу на экране.

Я разобрался с функциями редактирования "полной страницы" инструментов F12, где вы можете редактировать весь HTML-код страницы или весь CSS-код в виде блока, но даже после нескольких часов использования инструмента, читая интерактивная справка и многие поиски в Google, но я все еще борюсь с тем типом детального редактирования, к которому я привык в Firebug.

Прежде чем я сдаюсь, кто-нибудь знает, как использовать инструменты F12, чтобы ...

  • ... редактировать определенный элемент и его дочерние элементы, а не всю страницу одновременно? (например, контекстное меню «edit HTML» в firebug)
  • ... см. Изменения, внесенные в представлении редактирования, сразу отображаются в браузере, вместо того, чтобы выходить из представления редактирования, чтобы увидеть изменения?
  • ... легко найти текущий выбранный элемент (элемент с синим квадратом вокруг него) в режиме редактирования?
  • ... удалить один элемент? (в firebug я могу просто выбрать элемент и нажать «удалить»)
  • ... добавить новый стиль в класс, не просматривая каждый стиль в документе, чтобы найти тот, который применяется к элементу, который меня интересует? (В Firebug я могу просто дважды щелкнуть стиль в правой панели).

Если вышеперечисленное невозможно с IE F12, то есть ли хороший альтернативный плагин для редактирования DOM / CSS?

Кстати, я собираюсь ответить на этот вопрос не для того, чтобы использовать инструменты разработки IE9 (спасибо Microsoft за их включение в комплект поставки), а для того, чтобы научиться более продуктивно использовать их.

Кстати, я уже прочитал 20 других вопросов StackOverflow о эквиваленте Firebug в IE, но большинство из них, похоже, касаются отладки javascript и проверки DOM только для чтения. Я не нашел ни одного недавнего (IE9) о написании DOM / CSS. Поэтому я задаю еще один вопрос на эту тему ... мои извинения, если это обман.

Ответы [ 3 ]

4 голосов
/ 28 июня 2012

Это возможно, но я согласен, что не очень интуитивно.

  1. нажмите F12, чтобы открыть окно инструментов разработчика (т.е. 9).
  2. выберите вкладку CSS (в левом верхнем углу окна нижестрока меню)
  3. выберите файл css, который вы хотите изменить, из выпадающего списка.
  4. выберите правую кнопку мыши в соответствующем месте, и контекстное меню позволит добавлять / удалять все, что вам нравится
  5. чтобы изменить атрибут, просто нажмите на значение и измените его

надеюсь, это поможет

0 голосов
/ 22 июня 2011

Посмотрите на это .

Я думаю, что это решит ваши проблемы.

Ура!

0 голосов
/ 21 июня 2011

Нажмите кнопку редактирования, чтобы редактировать HTML. Когда вы закончите, щелкните по нему еще раз, чтобы просмотреть изменения

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...