Chrome代码调试指南

最新推荐文章于 2024-05-14 14:35:01 发布

web修理工

最新推荐文章于 2024-05-14 14:35:01 发布

阅读量328

点赞数

分类专栏： chrome 文章标签： chrome html html5

原文链接：https://blog.csdn.net/sviptzk/article/details/108105725

版权

chrome 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Disable javaScript 表示禁止js 运行 =>F12->F1->Disable JavaScript

打开开发者工具:=>https://blog.csdn.net/sviptzk/article/details/108105725
打开开发者工具:=>https://jingyan.baidu.com/article/295430f1fda5990c7f005076.html
打开开发者工具:=>https://blog.csdn.net/qq_34965596/article/details/105042567

Elements 标签元素
console JavaScript 调试
Sources 资源
network 网络资源
Performance 性能面板
Memory 记忆缓存
Application 应用程序
SEcurity 安全
Audits 审计

Elements

在这里插入图片描述

console.
在这里插入图片描述
Sources

Network (XHR ajax js jsonp())

Performance

Memory

在这里插入图片描述

Heap snapshot
堆快照

Heap snapshot profiles show memory distribution among your page’s JavaScript objects and related DOM nodes.
堆快照概要文件显示在页面的JavaScript对象和相关DOM节点之间的内存分布。

C ) Allocation instrumentation on timeline
©时间表上的分配工具

Allocation timelines show instrumented JavaScript memory alcations over time. Once profile is recorded you can select a time interval to see objects that were allocated within it
分配时间线显示随时间变化的检测JavaScript内存分配。一旦配置文件被记录下来，您就可以选择一个时间间隔来查看在其中分配的对象。

and still alive by the end of recording. Use this profile type to isolate memory leaks.
录音结束时还活着。使用此配置文件类型可隔离内存泄漏。

口Record allocation stacks (extra performance overhead)
口记录分配堆栈(额外的性能开销)

0 Alocation sampling .
0定位抽样。

Record memory alocations using sampling method. This profile type has minimal performance overhead and can be used for long running operations. It provides good
使用抽样方法记录内存分配。此配置文件类型具有最小的性能开销，可用于长时间运行的操作。它提供了好的

approximation of allocations broken down by JavaScript execution stack.
JavaScript执行堆栈分解的分配的近似。

js 动态注入:https://blog.csdn.net/qq_33315952/article/details/108584278

SEcurity

原生组件调试例如 video audio
在这里插入图片描述
console.log 引入链接

<script src='https://cdn.rawgit.com/lodash/lodash/4.17.4-es/lodash.default.js'></script>

console.log 引入链接

import("https://cdn.rawgit.com/lodash/lodash/4.17.4-es/lodash.default.js")
.then(({default:_})=>{// load and use lodash 
 console.log(`lodash version ${_.VERSION} is loaded`)
 console.log('_.uniq([2, 1, 2]) :', _.uniq([2, 1, 2]));
});

const CDNs = [
  {
    name: 'jQuery.com',
    url: 'https://code.jquery.com/jquery-3.1.1.min.js'
  },
  {
    name: 'googleapis.com',
    url: 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'
  }
];

console.log(`------`);
console.log(`jQuery is: ${window.jQuery}`);

Promise.race([
  import(CDNs[0].url).then(()=>console.log(CDNs[0].name, 'loaded')),
  import(CDNs[1].url).then(()=>console.log(CDNs[1].name, 'loaded'))
]).then(()=> {
  console.log(`jQuery version: ${window.jQuery.fn.jquery}`);
});

Promise.all([
        import('./a.js'),
        import('./b.js'),
        import('./c.js'),
    ])
    .then(([a, {default: b}, {c}]) => {
        console.log('a.js is loaded dynamically');
        
        b('isDynamic');
        
        c('isDynamic');
    });

// STATIC
import {test} from './utils_en.js'; // no dynamic locale
test();

// DYNAMIC
(async () => {
  const locale = 'en';
  
  const {test} = await import(`./utils_${locale}.js`);
  test('isDynamic');
})();