Gepiu的博客

有点想法很好,有点行动更好

树欲动...


Tag: Chrome开发者工具


  1. Chrome开发者工具 - Console(控制台面板) ③

    异常和错误处理 您需要修复网页抛出的异常和在JavaScript中调试错误。 如果你能得到页面异常和JavaScript错误的细节,在实际工作中非常有用 。当页面抛出异常或脚本产生错误时,Console(控制台)面板会提供明确的可靠信息,以帮助您找到并解决问题。 在Console(控制台)面板中,您可以跟踪异常及跟踪导致异常的执行路径,显式地或隐式地捕获它们(或忽略它们),甚至可以设置错误处理程序来自动收集和处理异常数据。 追踪异常 当出现问题时,打开DevTools控制台(Ctrl+Shift…

    Chrome开发者工具继续阅读

  2. Chrome开发者工具 - Console(控制台面板) ②

    在 Console(控制台)中诊断和打印日志 控制台日志是一个强大的方法,用来检查您的页面或应用程序。让我们从console.log()开始,探索其他高级用法。 写入信息到 Console(控制台) 对控制台的任何基本日志记录可以使用console.log()方法。这个方法使用一个或多个表达式作为参数,并将其当前值写入到控制台中,将多个参数连接成空格分隔行。 在你的JavaScript执行这行代码: console.log("Node count:", a.childNodes.length,…

    Chrome开发者工具继续阅读

  3. Chrome开发者工具 - Console(控制台面板) ①

    打开 Console(控制台) {#打开-console控制台} 以专用面板形式打开Console(控制台): 或作为任何其他面板的抽屉式面板形式打开: 打开控制台面板 {#打开控制台面板} 要打开专用的控制台面板,请执行以下之一操作: 按 Ctrl + Shift + J (Windows / Linux)或 Cmd + Opt + J (Mac)。 如果 DevTools 已打开,请按 Console (控制台)按钮。 打开控制台面板时,控制台抽屉式窗格会自动折叠隐藏。 打开控制台抽屉式窗格…

    Chrome开发者工具继续阅读

  4. Chrome开发者工具 - Elements(元素面板) ③

    编辑DOM Chrome DevToolsElements(元素)面板中的DOM树视图显示当前网页的DOM结构。通过DOM更新来实时编辑您的网页的内容和结构。 检查一个元素 使用Elements(元素)面板在DOM树中检查页面中的所有元素。选择任何元素并检查应用于它的样式。 这里有几种方法来检查一个元素: 右键点击页面上的任何元素并在右键菜单中选择Inspect(检查)。 按Ctrl+Shift+C(Windows)或Cmd+Shift+C(Mac)在检查元素模式下打开DevTools,然后…

    Chrome开发者工具继续阅读

  5. Chrome开发者工具 - Elements(元素面板) ②

    使用颜色选择器修改颜色 要打开Color Picker(颜色选择器,也称作拾色器),在Styles(样式)窗格中找到一个定义颜色(如color: blue)的CSS声明。在声明值的左边有一个有颜色的小方块。方形的颜色与声明值匹配。点击这个小方块打开Color Picker(颜色选择器)。(注:按住Shift键,点击这个小方块,可以修改颜色格式。关闭颜色选择器可以按Esc或Enter键。) 您可以通过多种方式与Color Picker(颜色选择器)进行交互,请看下图中对应编号的说明: Eyedro…

    Chrome开发者工具继续阅读

  6. Chrome开发者工具 - Elements(元素面板) ①

    编辑样式 使用Styles(样式)窗格修改与元素关联的CSS样式。 TL;DR Styles (样式)窗格允许您以尽可能多的方式更改本地CSS,包括编辑现有样式,添加新样式,添加样式规则。 如果你想要样式持久(他们页面重新加载而丢失),您需要将它们持久化到您的开发工作区。 检查应用到元素的样式 选择一个元素[Select an element] 来检查它的样式。Styles(样式)窗格将显示所有应用于所选元素的CSS规则,优先级从高到低展示: 在顶部是 element.style 。这些是使用s…

    Chrome开发者工具继续阅读

  7. Chrome开发者工具 - 设备模式(模拟移动设备)

    使用 Chrome 开发者工具的Device Mode(设备模式)来构建移动优先,完全响应式的网站。了解如何使用它来模拟各种设备及其功能。 警告: Device Mode(设备模式)可以近似估计您的网站在移动设备上的显示效果,但要获得完整的状况,你应该总是在真实的设备上测试你的网站。例如,DevTools无法模拟移动设备的性能特点。 简而言之 在 不同的屏幕尺寸和分辨率,包括Retina显示屏,上模拟您的网站。 通过可视化和 检查CSS媒体查询 进行响应式设计。 使用 网络模拟器 评估网站的性…

    Chrome开发者工具继续阅读

  8. Chrome开发者工具 - 设备模式(模拟和测试其他浏览器)

    确保你的网站能够在Chrome和Android上正常运行后,你的工作并没有结束。即使Device Mode(设备模式)可以模拟一系列其他设备,如iPhone,我们鼓励你查看模拟其他浏览器的解决方案。 TL;DR 当您没有特定设备时,或想做某些事情的抽查,最好的选择是在浏览器中直接模拟设备。 设备仿真器和模拟器让你在工作站的各种设备上模拟你开发网站。 基于云的模拟器允许你跨不同平台为你的网站自动化单元测试。 浏览器模拟器 浏览器模拟器非常适合用来测试网站的响应能力,但他们无法模拟在真实移动浏览器上…

    Chrome开发者工具继续阅读

  9. Chrome开发者工具 - 设备模式(测试响应和设备特定可视窗口)

    测试响应和设备特定可视窗口 更新后的Device Mode(设备模式)(从Chrome 49开始)是现在“移动优先”开发工具的一个组成部分,并扩展了主要的DevTools 工具条。了解如何使用其控件来模拟各种设备或完全响应式。 TL;DR 使用 Device Mode (设备模式)的屏幕模拟器测试你的网站的响应式布局。 保存自定义预设,以便以后轻松访问它们。 设备模式不能完全代替真实设备的测试。 注意其局限性。 使用可视窗口控件 Viewport Controls(可视窗口控件)允许你针对各…

    Chrome开发者工具继续阅读

  10. Chrome开发者工具 - 介绍

    官方文档地址 https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn#topofpage Chrome 开发者工具 Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具。使用开发者工具来重演,调试和剖析您的网站。 注意:寻找最新版本的Chrome 开发者工具,Chrome Canary 总是有最新的DevTools。 打开Chrome 开发者工具 在Chrome菜单中选择 更多工具 > 开…

    Chrome开发者工具继续阅读