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

Question

[Александр]

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

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

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

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

Upd: Я ищу не решение (код) из примера, а способ разбора кода javascript на чужом сайте, это указано в сабже

Comments

[Егор П]

Набрать в поисковике как сделать то то и уже по мануалу и смотреть

Answer 1

[Александр Нестеров]

Я бы советовал посмотреть в сторону гитхаба.
Там куча открытых исходников, притом - нормально оформленных и, нередко, хотя-бы с минимальным подобием документации.
Выкачивая сайты же есть шансы получить как минимум обсфуцированный код, разбирать который можно до посинения.

Answer 2

[mayton2019]

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

А вот изучать надо бизнес-код самого сайта. Изучать можно по разному. Верно говорят в топике выше - надо ставить брейкпоинты и смотреть как чего работает. А еще лучше - понять как фронт взаимодействует с бэком. Хороший вариант - нарисовать для себя модель наподобие Swagger/GraphQL где описать все методы и примеры аргументов.

Answer 3

[Владимир Коротенко]

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)

Answer 4

[ThunderCat]

Я ищу не решение (код) из примера, а способ разбора кода javascript на чужом сайте, это указано в сабже

А что, есть много вариантов? Да, девтулс, брэйкпоинты, трэйс и вот это все. Как собсно и в любых других чужих сырцах.