Chrome开发者工具详解.pdfVIP

Chrome开发者⼯具详解 Chrome 开发者⼯具详解(1)-Elements、Console 、Sources ⾯板 Chrome 开发者⼯具⾯板 ⾯板上包含了Elements⾯板、Console⾯板、Sources⾯板、Network⾯板、 Timeline⾯板、Profiles⾯板、Application⾯板、Security⾯板、Audits⾯板这些功能⾯板。 这些按钮的功能点如下： Elements:查找⽹页源代码HTML中的任⼀元素,⼿动修改任⼀元素的属性和样式且能实时在浏览器⾥⾯得到反馈。 Console:记录开发者开发过程中的⽇志信息，且可以作为与JS进⾏交互的命令⾏Shell。 Sources:断点调试JS。 Network:从发起⽹页页⾯请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、⼤⼩、所⽤时间等），可以根据这个进⾏⽹络 性能优化。 Timeline:记录并分析在⽹站的⽣命周期内所发⽣的各类事件，以此可以提⾼⽹页的运⾏时间的性能。 Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试⼀下Profiles,⽐如记录JS CPU执⾏时间细节、显⽰JS对象和相关的DOM节点的内存消耗、 记录内存的分配细节。 Application:记录⽹站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、 图⽚、脚本、样式表等。 Security:判断当前⽹页是否安全。 Audits:对当前⽹页进⾏⽹络利⽤情况、⽹页性能⽅⾯的诊断，并给出⼀些优化建议。⽐如列出所有没有⽤到的CSS⽂件等。 注：这⼀篇主要讲解前三个⾯板Elements、Console、Sources。 Elements ⾯板 实时编辑DOM节点和CSS样式 双击DOM树视图⾥⾯的节点，可以实时编辑标签属性，修改的效果会⽴刻反应在浏览器⾥⾯ 点击右侧Style⾯板，可以实时修改CSS的属性值，这⾥⾯的所有样式Name和Value都是可以编辑的;在每个属性后⾯单击可以添加新的样式，如下图： 点击右侧Computed⾯板，可以编辑左侧选中的盒⼦模型参数，所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素 的padding、border、margin属性值。 查看⽹页的本地修改历史 点击Styles⾯板中修改过属性的⽂件名，会跳转到Source⾯板 在⽂件位置右击选择Local modifications,可以查看本地的所有修改记录 点击指定的时间点可以看到粉红背景的删除内容和绿⾊背景的添加内容 Console ⾯板 控制台输出⽇志 通过JS代码或者命令⾏ console.log() 、 console.warn() 和 console.error() 可以将⽇志信息输出到控制台 console.log 显⽰⼀般的基本⽇志信息，当要显⽰的基本⽇志太多时可以使⽤ console.group 将相关的⽇志进⾏分组 console.warn 显⽰带有黄⾊⼩图标的警告信息 console.error 显⽰带有红⾊⼩图标的红⾊的错误信息 console.assert 当第⼀个参数为false时，才会显⽰第⼀个参数的值 可以根据JS条件判断输出不同的⽇志信息 注：当需要换到下⼀⾏⽽不是回车的时候，请按 Shift + Enter 。 控制台交互 JS表达式计算 在上⼀⼩节，我们已经看到可以在控制台输⼊JS表达式点击 Enter 即可得到表达式的值，当你在控制台输⼊命令时，会弹出相应的智能提 ⽰框，你可以⽤ Tab ⾃动完成当前的建议项 选择元素 快捷⽅式 描述 $() 返回与指定的CSS选择器相匹配的第⼀个元素，等同于 document.querySelector() $$() 返回与指定的CSS选择器相匹配的所有元素的数组，等同于 document.querySelectorAll() $x() 返回与指定的XPath相匹配的所有元素的数组 注：我在实际操作过程中发现 $() 并没有按预期返回相匹配的第⼀个元素，⽽是返回了所有匹配