Как понять, как javascript динамически меняет веб-страницу?

Question

По следующему URL-адресу динамически генерируется таблица (с заголовком Gene Name Gene ID Genetic Modification Type State Price Turnaround Time).

https://apac.cyagen.com/services/crispr-knockout-mouse-sperm-bank.html?q=104183

Если проверять chrome devtools, можно увидеть, что POSTотправляется запрос к https://bio.cyagen.net/api/bio/sperm-bank/search/, который приводит к следующему выводу (предварительно подтвержденному). Но мне не ясно, как эти данные JSON преобразуются в таблицу, отображаемую на веб-странице (т. Е. Какие поля в объекте JSON используются). Может ли кто-нибудь дать мне сейчас самый эффективный способ выяснить это? Спасибо.

{
  "exact": {
    "_shards": {
      "failed": 0,
      "successful": 5,
      "total": 5
    },
    "hits": {
      "hits": [
        {
          "_id": "AWbtC4w1Ls3QbU422f2l",
          "_index": "biodata3",
          "_score": 15.089622,
          "_source": {
            "cas9_cko": true,
            "cas9_cko_pro": "cas9_cko_planning",
            "cell_line": "C57BL/6N",
            "cell_line_cko": "C57BL/6N",
            "cell_line_es_cko": "C57BL/6N",
            "chromosome_num": 3,
            "dbXrefs": "MGI:MGI:1341098|Ensembl:ENSMUSG00000063779|Vega:OTTMUSG00000016670",
            "description": "chitinase-like 4",
            "es_cko": false,
            "full_name_from_nomenclature_authority": "chitinase-like 4",
            "gene_id": "104183",
            "gene_symbol": "Chil4",
            "id": 4308989,
            "live_gene": false,
            "locus_tag": "-",
            "map_location": "3|3 F2.2",
            "mgi_url": "http://www.informatics.jax.org/reference/marker/MGI:1341098?typeFilter=Literature",
            "modification_date": "20160426",
            "name": "Mus musculus",
            "nomenclature_status": "O",
            "number": "06588",
            "other_designations": "chitinase 3-like 4, Chil4;chitinase-3-like protein 4;secreted protein Ym2",
            "product_id": "KOCMP-06588-Chil4",
            "special_cko": false,
            "species_type": "Popular species",
            "spermbank_gene": true,
            "spermbank_gene_pro": "cas9_ko",
            "symbol_from_nomenclature_authority": "Chil4",
            "synonyms": "Chi3l4;Ym2",
            "taxonomy_id": "10090",
            "taxonomy_score": 25,
            "transcript_cnt_nm": 1,
            "transcript_cnt_nr": 0,
            "transcript_cnt_xm": 0,
            "transcript_cnt_xr": 0,
            "type_of_gene": "protein-coding",
            "vb_abbreviation": "m",
            "vb_name": "Mouse"
          },
          "_type": "gene-info-201708",
          "order": 1
        }
      ],
      "max_score": 15.089622,
      "total": 1
    },
    "timed_out": false,
    "took": 1
  },
  "fuzzy": {
    "_shards": {
      "failed": 0,
      "successful": 5,
      "total": 5
    },
    "hits": {
      "hits": [],
      "max_score": null,
      "total": 0
    },
    "timed_out": false,
    "took": 3
  }
}

Answer 1

Перейдите на сетевую панель Chrome Devtools:

Существует столбец Инициатор , который показывает, откуда в кодересурс был запрошен. Если столбец отсутствует для вас, вы можете добавлять / удалять столбцы, щелкнув правой кнопкой мыши заголовок столбца и используя предоставленное контекстное меню.

Вы можете щелкнуть непосредственно в том месте кода, из которого был инициирован запрос,или вы можете навести указатель мыши на запись и получить трассировку стека из запроса:

Я бы порекомендовал загрузить страницу с открытыми devtools и панелью Network. захват запросов. Найдите запись для интересующего вас ресурса (вы можете отфильтровать до XHR запросов или отфильтровать со строкой). Наведите указатель на элемент инициатора, чтобы найти лучшее место для отбрасывания точки останова, и щелкните, чтобы открыть ее на панели источников. Оттуда вы можете поместить точку останова в отладчик и просмотреть, что происходит с ресурсом после его возврата, чтобы понять, как он обрабатывается. Удачи!