Как разбирать код чужого сайта?

Можно ли использовать DevTools или др плагины для удобного разбора кода скриптов сайтов?

Например, изучаю - как на сайтах работает копирование в буфер по клику.
Есть как минимум 2 варианта реализации и самый популярный сейчас уже считается устаревшим.


Вот, я хочу разобрать код конкретного сайта, но вижу кучу скриптов react, JQuery и т.д.

Скачать всё и потом искать по файлам или есть более удобный вариант?

Upd: Я ищу не решение (код) из примера, а способ разбора кода javascript на чужом сайте, это указано в сабже
  • Вопрос задан
  • 210 просмотров
Пригласить эксперта
Ответы на вопрос 4
AlexNest
@AlexNest
Работаю с Python/Django
Я бы советовал посмотреть в сторону гитхаба.
Там куча открытых исходников, притом - нормально оформленных и, нередко, хотя-бы с минимальным подобием документации.
Выкачивая сайты же есть шансы получить как минимум обсфуцированный код, разбирать который можно до посинения.
Ответ написан
Комментировать
@mayton2019
Bigdata Engineer
react, JQuery - это известные фреймворки. Их код разбирать не надо. Надо просто знать как они работают.
Они документированы и очень хорошо описаны в литературе. И очень сомнительно что вы, глядя в код фреймворка поймете как он работает. Такого уровня обратный инжинеринг вам совсем не нужен. И не продуктивен. Просидите долгие годы.

А вот изучать надо бизнес-код самого сайта. Изучать можно по разному. Верно говорят в топике выше - надо ставить брейкпоинты и смотреть как чего работает. А еще лучше - понять как фронт взаимодействует с бэком. Хороший вариант - нарисовать для себя модель наподобие Swagger/GraphQL где описать все методы и примеры аргументов.
Ответ написан
Комментировать
firedragon
@firedragon
Senior .NET developer
function fallbackCopyTextToClipboard (text) {
    var textArea = document.createElement('textarea')
    textArea.value = text

    // Avoid scrolling to bottom
    textArea.style.top = '0'
    textArea.style.left = '0'
    textArea.style.position = 'fixed'

    document.body.appendChild(textArea)
    textArea.focus()
    textArea.select()

    try {
      var successful = document.execCommand('copy')
      var msg = successful ? 'successful' : 'unsuccessful'
      console.log('Fallback: Copying text command was ' + msg)
    } catch (err) {
      console.error('Fallback: Oops, unable to copy', err)
    }

    document.body.removeChild(textArea)
  }
  function copyTextToClipboard (text) {
    if (!navigator.clipboard) {
      fallbackCopyTextToClipboard(text)
      return
    }
    navigator.clipboard.writeText(text).then(function () {
      // console.log('Async: Copying to clipboard was successful!')
    }, function (err) {
      console.error('Async: Could not copy text: ', err)
    })
  }

 copyTextToClipboard(val)
Ответ написан
Комментировать
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Я ищу не решение (код) из примера, а способ разбора кода javascript на чужом сайте, это указано в сабже
А что, есть много вариантов? Да, девтулс, брэйкпоинты, трэйс и вот это все. Как собсно и в любых других чужих сырцах.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы