javascript - 如何弄清楚javascript如何动态改变网页？

Question

在以下 URL 上，表格(标题为基因名称基因 ID 基因修饰类型状态价格周转时间)是动态生成的。

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

如果检查 chrome devtools，可以看到向 ​​https://bio.cyagen.net/api/bio/sperm-bank/search/ 发送了一个 POST 请求，结果是以下输出(经过美化)。但我不清楚这个 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 网络 Pane :

有一个发起者列，向您显示从代码中请求资源的位置。如果该列不存在，您可以通过右键单击列标题并使用提供的上下文菜单来添加/删除列。

您可以直接单击发起请求的代码位置，也可以将鼠标悬停在该条目上并从请求中获取堆栈跟踪:

我建议在打开开发工具并使用网络 Pane 捕获请求的情况下加载页面。找到您感兴趣的资源条目(您可以筛选到 XHR 请求或使用字符串进行筛选)。将鼠标悬停在启动器条目上以找到放置断点的最佳位置，然后单击以在源 Pane 中将其打开。从那里，您可以在调试器中放置一个断点，并单步执行资源返回后发生的情况，以了解其处理方式。祝你好运!