Как найти функции, классы и идентификаторы на HTML / CSS / Javascript / PHP

0

Intro: Я исправляю сайт, который не был кодирован мной (первый раз), и я хотел бы знать, как лучше всего найти функции, классы и ассоциации идентификаторов во всех файлах веб-сайта.

Основная проблема. Основная проблема заключается в том, что я теряю слишком много времени, пытаясь выяснить, какая функция выполняет то, что и какие элементы затронуты. Например, я смотрю на определенный элемент с определенным идентификатором или классом, и мне нужно вручную искать все файлы для проверки ассоциаций.

Дополнительная информация: В настоящее время я использую sublimetext и, иногда, Dreamweaver, но я готов использовать другие программы, если необходимо, чтобы быть более эффективными. Веб-сайт - это в основном HTML, CSS и Javascript.

Пример: ID = "affected" был изменен файлами_1.js и file_7.js. Или ID = "affected" использует style_1.css, который является объектом target_5.js. Я не уверен, есть ли такое программное обеспечение.

Обновление: 1) Я все еще должен проверить ответ Сади Кэвани, но до сих пор я пришел к следующему: 2) NetBeans хорош для javascript, но для него требуется установка, чтобы сделать что-то, что sublimetext или notepad++ уже сделали. Например, я могу добавлять папки и/или файлы в sublimetext, нажимать ctrl + shift + f и находить любое слово во всех файлах, оно будет отображать файлы и некоторый код рядом с словом в этом файле, дважды щелкнуть, и я редактирую это файл в точной строке кода, где появляется слово. Это можно использовать для каждого типа файлов! 3) Chrome и Firefox с firebug - отличные инструменты для проверки CSS каждого элемента и для проверки некоторых изменений, не касаясь исходных файлов. 4) Я ожидал мощной программы, которая "думала", как браузер, показывать все, что происходит, когда браузер открывается "по очереди", поэтому я знаю, какой элемент был затронут кем и т.д.... возможно, этого даже не существует :(

Теги:

5 ответов

2

Помимо инструментов браузера, лучшим инструментом для этого будет NetBeans. После установки создайте проект с вашим текущим каталогом веб-сайта и перейдите к любому из файлов в этом каталоге. После открытия файла щелкните правой кнопкой мыши по идентификатору или классу и нажмите "Найти объявление". Работает как шарм.

Поделиться
  • 0
    Этот ответ хорош, но требует установки NetBeans :( Я предпочитаю использовать сублиметекст, где вы можете добавлять папки и искать определенную строку в файлах и / или папках с помощью Ctrl + Shift + F
2

Одна вещь, которая помогает мне, - это использовать Chrome и щелкнуть правой кнопкой мыши по элементу, а затем выбрать "Осмотреть элемент". Это вызывает Web Inspector, и оттуда я могу увидеть дополнительные сведения об элементе. (Я также могу играть с этими деталями, чтобы увидеть, как они меняют элемент).

Когда у меня есть определенный класс или id, я ищу код для ссылок на него. В возвышенном тексте я считаю, что shift + command + f выведет меню поиска. Оттуда вы сможете увидеть ссылки на этот класс или id.

Возможно, вам будет полезно исследовать сопоставление источников в Chrome. Если он правильно настроен, это позволит вам вносить изменения в свой код в Chrome. Это избавляет от необходимости искать, где определены стили элементов. Это более полезно, если вы имеете дело с набором статических файлов.

Надеюсь это поможет!

Поделиться
  • 1
    Кроме того, хотя и не самый лучший браузер, Firefox имеет отличный отладчик для JavaScript, называемый firebug. Safari также имеет нечто похожее, и все три имеют функцию «проверить элемент», как сказал Мартин, - это отличный способ увидеть соответствующие идентификаторы и классы. Так что если у вас нет Chrome, вы все равно можете использовать функцию проверки элементов
  • 0
    Благодарю. Я посмотрю на это и прокомментирую позже. Shif + cmd + F = что в windows? Как вы думаете, возможно ли сделать то, что я положил в примере выше? (Я отредактировал, чтобы попытаться вставить пример. Не знаю, если это слишком ясно, поэтому любые предложения будут полезны для улучшения первоначального сообщения).
Показать ещё 1 комментарий
0

Если вы используете Mac или какой-то Linux-дистрибутив, вы можете использовать grep для поиска любого слова во всех файлах. Grep означает "общий анализатор регулярных выражений" и находит выражения внутри файлов для вас. Например:

  $ grep 'random-word' home/mary/*.css

Он будет искать строку "случайное слово" во всех файлах css в папке /home/mary/. Вот несколько документов.

Если вы используете Windows, вы можете заменить grep для findstr. Существует статья, объясняющая, как это сделать.

Поделиться
0

Есть несколько инструментов, которые помогут вам найти то, что вы ищете. При использовании в сочетании, я уверен, вы будете готовы к рок-н-роллу.

Во-первых, проверьте консоль Google Chrome и инструменты разработчика, щелкнув правой кнопкой мыши на любом элементе веб-страницы и выбрав "Осмотреть элемент".

Первое, что вы увидите, - это элемент, выделенный синим цветом, с добавлением и полями, выделенными другими цветами. Вы также должны увидеть панель с вкладками вверх. Вы можете использовать вкладку "Источники", чтобы увидеть, какие файлы javascript используются на странице, и вкладку "Консоль", чтобы увидеть любые ошибки, которые генерирует текущий код.

Одна вещь, которую следует учитывать при отладке, используется console.log() для проверки изменений, которые вы вносите в код javascript. Если вы создаете объект и должны видеть, ударяет ли браузер этой части кода, вы можете ввести (в функции в исходном файле) console.log()

Затем, когда вы обновите браузер, вы увидите объект в консоли и все его свойства. Если вы ничего не видите, это означает, что браузер не поражает вашу/их функцию. Это также будет хорошим способом увидеть, что делает функция, если ее даже вызывается.

Другим инструментом, который вы можете использовать, является grep, если у вас есть Linux или Unix-поле, такое как Mac OS (я считаю, что есть аналогичный инструмент FINDSTR). Запустить терминал и простой способ увидеть, какие файлы в каталоге содержат заданную строку, cd в каталог и введите: grep -r StringToSearch *

Это будет рекурсивно искать каталог и любые дочерние каталоги для строки, которую вы вводите вместо "StringToSearch".

Если вы хотите получить дополнительную информацию от grep, см. Документацию о способах получения grep для получения более подробной информации, например, о конкретной строке, в которой находится строка. Http://ibm.co/18zWfaX <- содержит исчерпывающую документацию.

Поделиться
  • 0
    Ну, у Dreamweaver и Sublimetext также есть «найти в каталоге», но это не так гладко, как хотелось бы. Но моя главная проблема не только в поиске определенной строки в каталоге. Пожалуйста, проверьте пример, который я отредактировал в первом посте, чтобы увидеть, решит ли то, что вы предложили, проблему Вероятно, то, что я ищу, даже не существует ...
  • 0
    У @jetsetter, кажется, есть жизнеспособный ответ на ваш обновленный вопрос. Я обычно не сторонник NetBeans, но это, кажется, делает свое дело.
0

Dreamweaver и Sublime не обеспечивают хороший инструмент Sniffer.

То, что я использую, и что я предлагаю всем, это использовать webStorm или phpStorm.

С помощью webStorm, удерживая клавишу CTRL и нажав на функцию, она перенаправит вас в файл/местоположение функции.

Надеюсь, это было полезно :)

Поделиться
  • 0
    Что используется только для Java? Я постараюсь взглянуть на это и прокомментировать позже. Могу ли я легко увидеть, на какие элементы влияет функция Java? Или CTRL + правый клик - это просто определение функции «Перейти к» при нажатии на вызов функции?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню