精华内容
下载资源
问答
  • Chrome DevTools

    2019-04-30 10:48:54
    The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. We can use the DevTools to iterate, debug, and profile the site. Open DevTools Right-click a page element...

    The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. We can use the DevTools to iterate, debug, and profile the site.

    Open DevTools

    Right-click a page element and select Inspect, or click F12 (windows).

    We can choose the proper dock size (highlighted) to decide where the panel is attached to the page to be inspected.

    Discover DevTools

    Elements panel

    • View and change the CSS rules applied to any selected element in the Styles pane. To edit a name or value, click on it, make your changes, and press Tab or Enter to save the change.
    • View and edit a selected element's box model in the Computed pane.
    • View any changes made to your page locally in the Sources panel.

    Example:

    Before

    After

    When increasing the value of padding-top and padding-bottom, data density becomes larger.

    In Styles panel, click the file you have modified, which will take you to the Source panel. Right click on Local modifications, you can see the when and where you modified the file. Clicking revert will undo all the changes to the file.

    Other tips

    1. Styles associated with a selector that matches the element.

    2. User agent stylesheets are clearly labelled, and are often overridden by the CSS on your web page.

    3. Rules that have been overridden by cascading rules are shown with strikethrough text.

    4. Inherited styles are displayed as a group under the "Inherited from <NODE>" header. Click the DOM node in the header to navigate to its position in the DOM tree view.

    5. Grey colored entries are rules that are not defined but instead computed at runtime.

     

    Console panel

    Log diagnostic information during development or interact with the JavaScript on the page.

    Sources panel

    Debug your JavaScript using breakpoints or connect your local files via Workspaces to use DevTools as a code editor.

    Example to debug JS in Chrome Devtools:

    • Click on "Add Number1 and Number2", we find it returns incorrect result
    • In Sources→ Event Listener Breakpoints→ Check "click" under "mouse". When check the click checkbox, you set up an event-based breakpoint on all click events. When any node is clicked, and that node has a click handler, DevTools automatically pauses on the first line of that node's click handler.
    • Like in other programming IDE, click Step into next function call Step into next function call to step through the execution of the onClick() function, one line at a time. Click Step over next function call Step over next function    call. DevTools executes function without stepping into it.

    • Set another breakpoint. As the below shows, click on the beginning at line 32, which sets an breakpoint (highlighted in blue). Click resume script execution Resume script    execution , the script continues executing until it reaches the line of code you placed the breakpoint on.

    • Look at the lines of code in updateLabel() that have already executed. DevTools prints out the values of addend1addend2, and sum.

    • Use "Watch" to check the variable values. Click Add Expression Add Expression and enter what you want to check. For example, type "sum", "typeof sum" and press enter.

    • Now we know that the cause of the bug is data type.  To verify it, in the Console, type parseInt(addend1) + parseInt(addend2). Press Enter. DevTools evaluates the statement and prints out 6, which is the expected result.

    • We can edit JavaScript code directly within the DevTools UI to fix this issue. Change the code and save. This time we get correct result. 

      Keep in mind that this workflow only applies a fix to the code that is running in your browser. It won't fix the code for all users that run your page. To do that, you need to fix the code that's running on the servers that serve your page.

       

     

    Network panel

    Example: learn how to use the Chrome DevTools Network panel to understand why a page loads slowly.

    • In DevTools, click the Network tab.
    • Enable Capture Screenshots Capture    Screenshots, which turns blue when enabled. DevTools captures screenshots during the page load.
    • Check the Disable Cache checkbox. When this checkbox is enabled, DevTools doesn't serve any resources from the cache. This more accurately emulates what first-time users experience when they view your page.
    • From the dropdown menu that currently says No Throttling, select Regular 2G. DevTools throttles the network connection to simulate a regular 2G experience. This is how mobile users experience your site in places with poor connections. This is a worst-case setup. If you can get your page loading fast on this setup, it'll be fast for all your users!

    • Screenshots show that the page takes more than 10 seconds to load completely. Note the value for DOMContentLoaded, on the bottom of the Network panel. You should see a value of at least 4 seconds.
    • Click main.js to investigate that request further. DevTools shows a set of new tabs that provide more information about this request.

    • Click the Preview tab to view the request's source code. You can see that the script just hangs for 4000ms. 

      Solution: By marking this script with the async attribute and moving it to the bottom of the document's <body>, the page can load without waiting for the script.

      Code change:

      Before

      After

    • Double-click on the top-left screenshot. The time below the screenshot indicates when the screenshot was taken. The screenshot takes multiple seconds to load. That means it's probably too large of a file.

    • Hover over the Waterfall for the logo-1024px.png request. The request spends most of its time downloading the image. This confirms that the image is too large. Convert format of the logo will reduce its size.

    • The Requests table (highlighted in blue in above pic) displays the following columns by default:

      • Name. The filename of, or an identifier for, the resource.
      • Status. The HTTP status code.
      • Type. The MIME type of the requested resource.
      • Initiator. The following objects or processes can initiate requests:
        • Parser. Chrome's HTML parser.
        • Redirect. An HTTP redirect.
        • Script. A JavaScript function.
        • Other. Some other process or action, such as navigating to a page via a link or entering a URL in the address bar.
      • Size. The combined size of the response headers plus the response body, as delivered by the server.
      • Time. The total duration, from the start of the request to the receipt of the final byte in the response.
      • Waterfall. A visual breakdown of each request's activity.

    Other tips

    1. By default, DevTools shows the Overview pane. Click Hide overview Hide overview to hide it.
    2. By default, DevTools uses small rows in the Requests pane. Click Use large request rows Use large request rows to use large rows, instead.
    3. By default, DevTools shows the Filters pane. Click Filter Filter to hide it.
    4. Save a request as HAR with content:
      1. Right-click the row containing the request in the Requests table.
      2. Select Save as HAR with Content.

    5. Copy requests to the clipboard. Under the Name column of the Requests table, right-click a request, hover over Copy, and select one of the options you want to copy.
    6. Add or remove request columns: right-click the header of the Requests table and select an option to hide or show it. Currently displayed options have checkmarks next to them.

    Performance panel

    Improve the runtime performance of your page by recording and exploring the various events that happen during the lifecycle of a site.

    Runtime performance is how your page performs when it is running, as opposed to loading. Next teaches how to use the Chrome DevTools Performance panel to analyze runtime performance. In terms of the RAIL model, the skills are useful for analyzing the Response, Animation, and Idle phases of your page.

    • In DevTools, click Record Record. DevTools captures performance metrics as the page runs.
    • Wait a few seconds.
    • Click Stop. DevTools stops recording, processes the data, then displays the results on the Performance panel.
       Recording of the page's performance:
    • Look at the FPS chart. 
      Whenever you see a red bar above FPS (Frames Per Second, the main metric for measuring the performance of any animation,  Users are happy when animations run at 60 FPS), it means that the framerate dropped so low that it's probably harming the user experience. In general, the higher the green bar, the higher the FPS.
    • Below the FPS chart you see the CPU chart. 
      The colors in the CPU chart correspond to the colors in the Summary tab, at the bottom of the Performance panel. The fact that the CPU chart is full of color means that the CPU was maxed out during the recording. Whenever you see the CPU maxed out for long periods, it's a cue to find ways to do less work.
    • Hover your mouse over the FPSCPU, or NET charts. DevTools shows a screenshot of the page at that point in time. Move your mouse left and right to replay the recording. This is called scrubbing, and it's useful for manually analyzing the progression of animations.
    • In the Frames section, hover your mouse over one of the green squares. DevTools shows you the FPS for that particular frame. Each frame is probably well below the target of 60 FPS.


       
    • Another handy tool is the FPS meter, which provides real-time estimates for FPS as the page runs.
      • Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu.
      • Start typing Rendering in the Command Menu and select Show Rendering.
      • In the Rendering tab, enable FPS Meter. A new overlay appears in the viewport.
    • Note the summary tab. When no events are selected, this tab shows you a breakdown of activity. The page spent most of its time rendering. Since performance is the art of doing less work, your goal is to reduce the amount of time spent doing rendering work.
    • Expand the Main section. DevTools shows you a flame chart of activity on the main thread, over time. The x-axis represents the recording, over time. Each bar represents an event. A wider bar means that event took longer. 
    • Zoom in on a single Animation Frame Fired event by clicking, holding, and dragging your mouse over the Overview, which is the section that includes the FPSCPU, and NET charts. The Main section and Summary tab only display information for the selected portion of the recording.
    • Note the red triangle in the top-right of the Animation Frame Fired event. A red triangle is a warning that there may be an issue related to this event.
    • Click the Animation Frame Fired event. The Summary tab now shows you information about that event. Note the reveal link. Clicking that causes DevTools to highlight the event that initiated the Animation Frame Fired event. Also note the app.js:94 link. Clicking that jumps you to the relevant line in the source code.
    • Under the app.update event, there's a bunch of purple events. If they were wider, it looks as though each one might have a red triangle on it. Click one of the purple Layout events now. DevTools provides more information about the event in the Summary tab. Indeed, there's a warning about forced reflows (layout).

    • In the Summary tab, click the app.js:70 link under Layout Forced. DevTools takes you to the line of code that forced the layout.
      qa

    Memory panel

    Learn how to use Chrome and DevTools to find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections.

    memory leaks

    In object-oriented programming, a memory leak may happen when an object is stored in memory but cannot be accessed by the running code.

    Memory leak occurs when programmers create a memory in heap and forget to delete it.

    Memory issues are important because they are often perceivable by users. Users can perceive memory issues in the following ways:

    • A page's performance gets progressively worse over time. This is possibly a symptom of a memory leak. A memory leak is when a bug in the page causes the page to progressively use more and more memory over time.
    • A page's performance is consistently bad. This is possibly a symptom of memory bloat. Memory bloat is when a page uses more memory than is necessary for optimal page speed.
    • A page's performance is delayed or appears to pause frequently. This is possibly a symptom of frequent garbage collections. Garbage collection is when the browser reclaims memory. The browser decides when this happens. During collections, all script execution is paused. So if the browser is garbage collecting a lot, script execution is going to get paused a lot.
       

    Monitor memory use in realtime with the Chrome Task Manager:

    • Press Shift+Esc or go to the Chrome main menu and select More tools > Task manager to open the Task Manager.
    • Right-click on the table header of the Task Manager and enable JavaScript memory.
      • The Memory column represents native memory. DOM nodes are stored in native memory. If this value is increasing, DOM nodes are getting created.
      • The JavaScript Memory column represents the JS heap. This column contains two values. The value you're interested in is the live number (the number in parentheses). The live number represents how much memory the reachable objects on your page are using. If this number is increasing, either new objects are being created, or the existing objects are growing.

     

     

    REF

    https://developers.google.com/web/tools/chrome-devtools/

     

    展开全文
  • Chrome Devtools

    2018-12-20 02:07:08
    Open Chrome DevTools Ctrl + Shift + I =&gt; 唤醒控制台 DevTools for Beginners Elements =&gt; Styles =&gt; + New Style Rule (添加新的临时注入样式表) Elements =&gt; Styles =&gt; :hov...

    Open Chrome DevTools

    Ctrl + Shift + I => 唤醒控制台

    DevTools for Beginners

    Elements => Styles => + New Style Rule (添加新的临时注入样式表)

    Elements => Styles => :hov (激活元素伪类状态) => :active, :hover, :focus, :visited, :focus-within

    CSS

    CSS Reference

    Ctrl + Shift + C => select an element in the page to inspect it (选择元素检查)

    Elements => Computed => Show all => (显示所有 css 继承属性)

    Command Menu (命令菜单) => Ctrl + Shift + P (在唤醒控制台的前提下)

    JavaScript

    Sources => Event Listener Breakpoints => (特定事件发生时调试)

    Sources => Ctrl + Shift + O (查找函数定义) + Ctrl + O (查找文件)

    Search => Ctrl + Shift + F (查找面板)

    Sources => Watch => (监听变量/表达式的值)

    Pause Your Code With Breakpoints

    Breakpoint Type Use This When You Want to Pause...
    Line-of-code On an exact region of code.
    Conditional line-of-code On an exact region of code, but only when some other condition is true.
    DOM On the code that changes or removes a specific DOM node, or its children.
    XHR When an XHR URL contains a string pattern.
    Event listener On the code that runs after an event, such as click, is fired.
    Exception On the line of code that is throwing a caught or uncaught exception.
    Function Whenever a specific function is called.

    DOM change breakpoints => Elements => Right-click the element (选中元素鼠标右键点击) => Break on => Subtree modifications (内容变化) , Attribute modifications (属性变化) , Node removal (节点移除)

    Exception breakpoints => Sources => Pause on exceptions (八角形暂停按钮)

    Function breakpoints => debug(fn) => is equivalent to setting a line-of-code breakpoint on the first line of the function.

    JavaScript Debugging Reference

    Right-click the line of code that you're interested in, and select Continue to here. DevTools runs all of the code up to that point, and then pauses on that line. (调试时右键选择执行代码到当前行)

    While paused on a line of code, right-click anywhere in the Call Stack pane and select Restart Frame to pause on the first line of the top function in your call stack. The top function is the last function that was called. (重新执行调用栈里面的最顶层函数)

    Blackbox a script when you want to ignore that script while debugging. When blackboxed, a script is obscured in the Call Stack pane, and you never step into the script's functions when you step through your code.

    Blackbox a script from Settings => Settings => Blackboxing => Add pattern

    Run snippets of debug code from any page => Sources => Snippets => + New snippet

    UI References and Overviews

    Keyboard Shortcuts

    快捷键
    Ctrl + F 搜索当前文件
    Ctrl + Shift + F 搜索所有文件
    Ctrl + O / Ctrl + P 按文件名搜索
    Ctrl + D 选择光标处变量
    Ctrl + M 转到匹配的括号处
    Ctrl + ` 聚焦到控制台
    Ctrl + L 清空控制台输出
    Ctrl + Shift + C 检查元素
    Shift + 左键点击拖动 模拟双指手势放大缩小

    Accessibility

    Audits => Accessibility

    Elements => (选择元素) => Accessibility

    You may prefer to use the aXe extension (Accessibility testing in Chrome Developer Tools) rather than the Audits panel. They generally provide the same information, since aXe is the underlying engine that powers the Audits panel.

    ARIA attributes ensure that screen readers have all of the information that they need in order to properly represent a page's contents.

    Track Which Element has Focus => Console => Create Live Expression (眼睛) => document.activeElement => Right-click => Reveal in Elements panel / Store as global variable

    More Tools => Sensors (传感器) => Geolocation / Orientation

    override the user agent string => Ctrl + Shift + P => Command Menu => Show Network conditions => User agent

    Remote Debug Android Devices

    Android 设备 => Settings => Developer Options => Enable USB Debugging

    PC 电脑 => Main Menu => More tools => Remote devices => Discover USB devices

    chrome://inspect => 访问已启用调试的 webview 列表

    Console

    console.clear() => 清除控制台历史记录

    Console => console settings => Preserve log => 保留控制台输出历史记录

    Network => Preserve log => 保留网络请求历史记录

    Settings => Preferences => Console

    $() => document.querySelector() $$() => document.querySelectorAll() keys() values() debug(fn) => sets a breakpoint on the first line of that function

    // 将控制台消息组织在一起 =>
    // 自动折叠组, 不默认展开全部
    console.groupCollapsed()
    
        // 允许嵌套
        console.group()
        console.groupEnd()
    
    console.log()
    console.warn()
    ...
    
    console.groupEnd()
    复制代码
    // assert 在第一个参数判读为 false 时显示第二个错误参数
    console.assert(list.childNodes.length < 500, "Node count is > 500");
    复制代码
    占位符
    %s string
    %i / %d int
    %f float
    %o DOM
    %O Object
    %c css style

    console.count(label) => 标签计数 console.dir() => 以 JavaScript 形式表示的指定对象 console.dirxml(object) => 输出 XML 表示形式

    // 性能分析
    function processPixels() {
      console.profile("processPixels()");
      // later, after processing pixels
      console.profileEnd();
    }
    复制代码
    // 计时器
    console.time("Array initialize");
    var array = new Array(1000000);
    for (var i = array.length - 1; i >= 0; i--) {
      array[i] = new Object();
    }
    console.timeEnd("Array initialize");
    复制代码

    console.timeStamp(label) => 在录制会话期间向 Timeline 添加一个事件

    console.trace() => 从调用位置输出一个堆叠追踪

    console.table() => 直观查看数组/对象

    // inspect() 函数选取一个 DOM 元素或 JavaScript 引用作为一个参数
    // 如果提供 DOM 元素, 进入 Elements 面板并显示该元素.
    // 如果提供 JavaScript 引用, 则进入 Profile 面板
    $('[data-target="inspecting-dom-elements-example"]');
    inspect($_);
    复制代码

    Monitor Events

    • 使用 monitorEvents() 侦听特定类型的事件
    • 使用 unmonitorEvents() 停止侦听
    • 使用 getEventListeners() 获取 DOM 元素的侦听器
    • 使用 Event Listeners Inspector 面板获取有关事件侦听器的信息
    monitorEvents(document.body, "click");
    unmonitorEvents(document.body);
    getEventListeners(document);
    复制代码
    • $_ 返回最近评估的表达式的值
    • $0 - $4 Elements 选择的最后五个 DOM 元素或 Profiles 选择的最后五个 JavaScript 堆对象的历史记录
    • $(selector) => document.querySelector()
    • $$(selector) => document.querySelectorAll()
    • $x(path) => 与 XPath 表达式匹配的 DOM 元素数组
    • clear()
    • copy(object)
    • debug(fn) => undebug(fn)
    • dir(object) => console.dir()
    • dirxml(object) => console.dirxml()
    • inspect(object/fn) => ( DOM => Elements / JavaScript Object => Profiles )
    • keys(object)
    • values(object)
    • monitor(fn) => 指明函数名称及调用时所需参数 => unmonitor(fn)
    • monitorEvents(object, events) => 监听指定对象指定事件 => unmonitorEvents(object[, events])
    • profile(name) => 启动 JavaScript CPU 分析会话 => profileEnd()
    • table(data[, columns])

    Performance

    RAIL => Response (响应) , Animation (动画) , Idle (空闲) , Load (加载)

    • 以用户为中心
    • 立即响应用户 => <= 100ms
    • 设置动画或滚动时, 在 10ms 内生成帧 => 人们特别擅长跟踪运动, 如果动画不流畅, 他们就会对运动心生反感. 用户可以感知每秒渲染 60 帧的平滑动画转场. 也就是每帧 16 毫秒(包括浏览器将新帧绘制到屏幕上所需的时间), 留给应用大约 10 毫秒的时间来生成一帧. => { JavaScript => Style => Layout => Paint => Composite }
    • 最大程度增加主线程的空闲时间 => 利用空闲时间完成推迟的工作, 推迟的工作应分成每个耗时约 50ms 的多个块. 如果用户开始交互, 优先级最高的事项是响应用户. 要实现小于 100 毫秒的响应, 应用必须在每 50 毫秒内将控制返回给主线程, 这样应用就可以执行其像素管道, 对用户输入作出反应等等. 以 50 毫秒块工作既可以完成任务, 又能确保即时的响应.
    • 持续吸引用户 => <= 1000ms 呈现交互内容

    The main metric for measuring the performance of any animation is frames per second (FPS). Users are happy when animations run at 60 FPS.

    在 FPS 图下面是CPU图. CPU 图表中的颜色与性能面板底部的Summary选项卡中的颜色相对应. CPU 图表充满颜色这一事实意味着在记录期间 CPU 已经达到了最大值. 每当您看到 CPU 长时间耗尽时, 就提示您要想办法减少工作量.

    In the Frames section, hover your mouse over one of the green squares. DevTools shows you the FPS for that particular frame. Each frame is probably well below the target of 60 FPS.

    Ctrl + Shift + P => Command Menu => Show Rendering => FPS Meter

    Expand the Main section. DevTools shows you a flame chart of activity on the main thread, over time. The x-axis represents the recording, over time. Each bar represents an event. A wider bar means that event took longer. The y-axis represents the call stack. When you see events stacked on top of each other, it means the upper events caused the lower events.

    Optimize Website Speed

    Audits

    Each Size cell shows two values. The top value is the size of the downloaded resource. The bottom value is the size of the uncompressed resource.

    Ctrl + Shift + P => Command Menu => Show Coverage => Coverage => js 文件代码使用情况

    When you're working with your own code, the Coverage tab can help you analyze your code, line-by-line, and only ship the code that's needed for page load.

    Ctrl + Shift + P => Command Menu => Show Request Blocking => Request Blocking => 请求拦截

    Performance => Main => Bottom-Up

    Network

    TTFB => Time To First Byte => waiting to receive the first byte from the server

    If the connection is slow, consider hosting your content on a CDN or changing hosting providers. If the server is slow, consider optimizing database queries, implementing a cache, or modifying your server configuration.

    Timing breakdown phases explained

    Queueing => 排队时间 Stalled => 被停止 DNS Lookup => 解析IP Proxy negotiation => 浏览器正在与代理服务器协商请求 Request sent => 请求发送 Request to ServiceWorker => 请求发送到sw Waiting(TTFB) => 浏览器正在等待响应的第一个字节. 这个时间包括1次延迟往返和服务器准备响应所花费的时间. Content Download => 浏览器正在接收响应 Receiving Push => 接收HTTP2服务器推送 Reading Push => 读取以前接收到的本地数据

    To view the initiators and dependencies of a request, hold Shift and hover over the request in the Requests table. DevTools colors initiators green, and dependencies red. 若要查看请求的发起者和依赖项, 请按住Shift并将鼠标悬停在请求表中的请求上. DevTools将启动器设置为绿色, 而依赖项设置为红色.

    View the stack trace that caused a request When a JavaScript statement causes a resource to be requested, hover over the Initiator column to view the stack trace leading up to the request. 当JavaScript语句导致请求资源时, 将鼠标悬停在Initiator列上, 以查看导致请求的堆栈跟踪.

    Memory

    垃圾回收期间, 所有脚本执行将暂停.

    More tools => Task manager => Shift + Esc => 任务管理器

    Memory => 原生内存 => DOM节点存储在此 => 值大说明正在创建DOM节点

    JavaScript Memory => 实时数字表示页面上可到达对象正在使用的内存量 => 正在创建对象或已有对象正在增长

    只有页面的 DOM 树或 JavaScript 代码不再引用 DOM 节点时, DOM 节点才会被作为垃圾进行回收. 如果某个节点已从 DOM 树移除, 但某些 JavaScript 仍然引用它, 我们称此节点为"已分离". 已分离的 DOM 节点是内存泄漏的常见原因.

    Memory => Profiles

    展开全文
  • chrome devtools

    2016-11-19 23:09:00
    chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css. windows:ctrl+shift+i mac:cmd+opt+i DOM 修改 html & 属性 节点右键, 如下图, 可以: 添加属性(enter) 修改 ...
    • Elements

      chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css.

      • windows: ctrl + shift + i
      • mac: cmd + opt + i

      DOM

      修改 html & 属性

      节点右键, 如下图, 可以:

      • 添加属性(enter)
      • 修改 html(F2)
      • 删除元素(delete)

      除了右键, 还可以:

      • h toggle 元素的 visibility 属性
      • 拖拽节点, 调整顺序
      • 拖拽节点到编辑器
      • ctrl + z 撤销修改

      查看元素上绑定了哪些事件

      event

      • 默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点
      • Selected Node Only 只会列出当前节点上绑定的事件
      • 每个事件会有对应的几个属性 handlerisAtributelineNumberlistenerBodysourceNametypeuseCapture
        • handle
        • handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler
        • isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的
        • useCapture 是 addEventListener 的第三个参数, 说明事件是以 冒泡 还是 捕获 顺序执行

      Styles

      修改样式

      • 添加规则
      • 添加、修改属性 同样可以通过 ctrl + z 取消

      断点

      代码断点

      • 设置断点
        • 在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断电, 在循环中需要断点时比较有用.
        • 断点后可以查看 堆栈, 变量 信息:
      • 在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信息时比较有用.
      • 断点后的变量保存到全局
        • 选中变量, 右键 Evalute in console
        • 在 console 中选中输出的内容, 右键 store as global variable

      事件断点

      元素上事件断点

      devtools 可以查看某一个元素上绑定了哪些事件: Elements > Event Listeners

      dom mutation 断点(推荐)

      dom mutation event 是 DOM3 添加的新的事件, 一般是 dom 结构改变时触发. devtools 可以对 DOMSubtreeModified DOMAttrModified 和 DOMNodeRemoved 时断点. 对上面 元素上事件断点(mouseover) 后不容易找到业务代码, 使用 mutation 断点, 断点后配合 call stack 就可以找到业务代码了, 如下图这种情况使用全局搜索(ctrl + shift + f) 代码中 css classname 也能找到业务代码, 然后直接断点也可以.

      全局事件断点

      devtools 还可以对事件发生时断点, 比如 click 发生时断点, 这个跟 元素上事件断点 不同, 不会限定在元素上, 只要是事件发生, 并且有 handler 就断点; 还可以对 resize, ajax, setTimeout/setInterval 断点.

      下面这个图是 resize 时中断, 因为库都代理了, 还需要在断点处一步一步跟下去才能走到业务代码中.

      几个常用的断点快捷键:

      • F8: 继续执行
      • F10: step over, 单步执行, 不进入函数
      • F11: step into, 单步执行, 进入函数
      • shift + F11: step out, 跳出函数
      • ctrl + o: 打开文件
      • ctrl + shit + o: 跳到函数定义位置
      • ctrl + shift + f: 所有脚本中搜索

      Console

      元素选择

      $(selector)

      即使当前页面没有加载jQuery,你也依然可以使用$和$$函数来选取元素,实际上,这两个函数只是对document.querySelector()和document.querySelectorAll()的简单封装,$用于选取单个元素,$$则用于选取多个:

      $_

      使用 $_ 来引用最近的一个表达式

      $0 - $4

      除了$_,你还可以使用$0,$1,$2,$3,$4这5个变量来引用最近选取过的5个DOM元素。 $0 为Elements HTML 面板中选中的元素。 $1 为上一次在 HTML 面板中选中的元素。 $2$3$4 同样的。不过只能到$4

      copy

      复制到剪切板,copy之后,直接ctrl+v

      信息输出

      在js代码中打点console.log() 类似debugger

    转载于:https://www.cnblogs.com/iloveyou-sky/p/6081814.html

    展开全文
  • Chrome DevTools的一个黑暗主题。 首先安装此扩展,然后执行以下操作: 后启用DevTools实验… Chrome DevTools的深色主题。 !!! 不在62号及以后版本中工作!!! 我正计划解决此问题,但可能需要一段时间才能解决。 ...
  • 添加一个简单的刷新按钮(选项卡)到Devtools窗口。 为什么?有时你只需要在devtools窗口中刷新按钮,而不是将手从下巴移动到键盘的`cmd + R`。或者,也许你已经开放了很多开发工具,你根本无法快速导航到当前的检查...
  • 这是一个主题灵感来源于Material Theme的崇高文字,它将Material Design视觉语言带到了您的Chrome Devtools。这个主题增加了一些功能,如智能高亮,除了使Devtools界面更漂亮。 安装指南: 在设置>扩展中安装并启用...
  • 《冰雪奇想》是一篇出色的文本和谷歌版的Chrome DevTools的主题。该产品的研发得到了目标与现代主题看,… 《冰雪奇缘》是Sublime Text和Google Chrome DevTools的主题。 它的开发旨在使它成为具有现代外观的主题,...
  • awesome-chrome-devtoolsChrome DevToolsDevTools协议生态系统中的出色工具和资源
  • Chrome DevTools前端 Chrome DevTools的客户端,包括用于运行DevTools网络应用程序的所有JS和CSS。 源代码 前端可在。 设计准则 请注意,DevTools遵循其他。 问题分类 问题分类指南可以找到。 工作流程 可以找到...
  • Devtools Styler可以更改chrome devtools字体和字体大小。 问题:如果在设置devtools字体后,devtools选项卡的标题中带有省略号,请放大和缩小devtools以正确恢复选项卡的详细信息安装前的步骤:1.打开新选项卡,...
  • 一个名为Magoon的黑暗主题,它存在于GTK3、Vscode、React DevTools,现在是Chrome开发工具。 这是一个主题,可以使颜色变得流行,并使Chrome控制台看起来引人入胜。 您可以在Github上找到Magoon用于其他功能,例如...
  • Chrome DevTools Protocol Viewer Chrome DevTools Protocol Viewer awesome-chrome-devtools ...

    Chrome DevTools Protocol Viewer  

     

    awesome-chrome-devtools

    posted on 2017-06-27 16:19 lexus 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/lexus/p/7085824.html

    展开全文
  • Chrome Devtools协议PHP客户端 适用于PHP客户端。 基本用法 // context creates deadline for operations $ ctx = Context :: withTimeout ( Context :: background (), 30 /* seconds */ ); // launcher starts ...
  • Chrome DevTools.docx

    2019-10-25 18:39:47
    Chrome DevToolsChrome 开发者工具) 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。官网还推荐一款叫做 Chrome 金丝雀版本(Chrome Canary)的 Chrome 浏览器,从这里你可以获得最新版本的 DevTools...
  • 适用于Google Chrome DevTools的Darcula主题 安装说明 通过Chrome Web Store- 添加此主题。 转到chrome:// flags /#enable-devtools-experiments并启用开发者工具实验。 选择页面底部的[立即重新启动]。 打开...
  • Chrome DevTools 使用详解

    万次阅读 2018-03-19 21:42:39
    写在前面:Chrome DevTools 系列文章正在紧张地整理当中,目前正在整理 DevTools 的第一部分: Elements,大家可以关注 Chrome DevTools 来获得最新的信息,也可以关注整个项目front-end-study。Chr...
  • Chrome DevToolsChrome 开发者工具)介绍 Chrome DevToolsChrome 开发者工具)是一套内置于Google Chrome(Google开发的免费网页浏览器)中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。 Chrome ...
  • 请检查Chrome devtools的内置深色主题。 预习 Chrome DevTools主题,以零基础模板为基础,强调深色的唯物主义。 如何安装 转到chrome:// flags,并确保已启用“启用开发人员工具实验”。 如果您执行了第2步,请...
  • Chrome DevTools 操作归纳

    2019-11-01 08:56:12
    本文是对Chrome DevTools 操作一个较为全面的归纳介绍。主要介绍的Chrome DevTools 的各个面板的功能作用以及前端开发人员的一些调试技巧。相信很多人在这之前已经在日常开发中使用着Chrome DevTools ,对其也有着...
  • devtools-cheatsheet, 使用 Chrome DevTools的开发人员的cheatsheet Chrome Devtools Cheatsheet 打开 Devtools要访问开发人员工具,可以以在 Google Chrome 中的任何网页或者应用程序中使用以下选项之一:选择 ...
  • Plugin for Chrome DevTools

    2020-12-30 20:14:02
    <div><p>Could you create plugin for Chrome DevTools? I would like using DevTools as main editor. <p>DevTools is powerfull visual editor now... <ul><li>...
  • <p>I would like to clone the inspect functions of chrome devtools: I have an iframe to load a web page, click on a html elements inside it and get the source code of the element (like chrome devtool ...
  • Chrome DevTools debugging?

    2020-12-09 08:55:26
    <div><p>How can I debug the .vue or .html component file for the vue component? the files do not show up in the Sources tree view when using Chrome DevTools. I manually added it, but it doesn't ...
  • hihat, 使用 Chrome DevTools的本地 node/浏览器开发 hihat 使用 Chrome DevTools的本地 node/浏览器开发在 Chrome DevTools进程中运行源文件。 保存文件将重新加载标签。这对于本地单元测试浏览器代码和完整的Web ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,224
精华内容 2,089
热门标签
关键字:

chromedevtools