186 Chrome DevTools: How to use Logpoints for quicker JavaScript debugging

You can use the new Logpoint feature to quickly inject a console.log message into your JavaScript code with any variables you like. You can do this without having to pause at a breakpoint which can help your debugging workflow.

185 Chrome DevTools: Generate a JavaScript expression to get a DOM node

DevTools can generate a JavaScript expressions which accesss a DOM node you specify ,this generated expression is ready to paste into your codebase.

Example

document.querySelector('#num2')

184 Chrome DevTools: Easily identify key rendering milestones with Paint Timing Markers

  • First Contentful Paint
  • First Meaningful Paint
  • DOMContentLoaded Event
  • Onload Event

Note programmatically access Paint Timing information in JavaScript

performance.getEntriesByType('paint')

183 Chrome DevTools: Shortcuts to access the DOM in JavaScript from the Console Panel

If you right click on a DOM Node in the Elements Panel, you can select Store as global variable which gives you quick access to that node from the Console Panel.

The JavaScript variables are named temp1, temp2, temp3 and so on.

182 VS Code: Automatically convert your Promise chains into async/await

181 Chrome DevTools: Multiple techniques to expand all child nodes in the DOM tree

  • Right click on a parent DOM node and select Expand recursively to expand all child nodes
  • You can also hold the Option key and then click the arrow icon next to a DOM node to expand all children. On Windows, the key combination is Control + Alt

180 Chrome DevTools: Throttle your CPU and network with Lighthouse audits

179 Chrome DevTools: Easily pause on JavaScript code without manually setting breakpoints

You can easily pause current script execution with these keyboard shortcuts:

Mac: F8 or Command + \

Windows: F8 or Control + \

Chrome DevTools: Create live expressions within the Console panel

174 Chrome DevTools: Drag and drop new images to override them on a website

  • Enable local overrides.
  • Locate the original website image in the Sources Panel > Page Pane.
  • Drag and drop your new image from the filesystem over the existing image in the Sources Panel.

173 Chrome DevTools: Identify objects created with a certain constructor

Built into the DevTools Console is the Command Line API. You can use this JavaScript snippet:

queryObjects(Constructor)

To query for and retrieve objects which were created from the constructor you specify.

172 Chrome DevTools: Argument Hints for built-in and user-defined JavaScript code

The new Argument Hints feature within the Console Panel informs you of function signatures. This can be useful for exploring lesser known web platform APIs.

171 Chrome DevTools: Import and export Network Panel recordings

To export a Network Panel recording, right click within the Network Panel and select Save as HAR with content, you can drop this same exported HAR file into the Network Panel to visualise it.

170 Chrome DevTools: Search across all network headers and content

You can now search across all network headers and response bodies in the Network Panel. Use the shortcut Cmd + F / Ctrl + F to open the Network Search Sidebar. Searching by regular expression is also supported.

169 Chrome DevTools: Debugging webpage accessibility with audits, the a11y pane and colour contrast

168 Chrome DevTools: Instant results for your JavaScript expressions

Example

`2 + 2 =: ${2+2}`

167 Chrome DevTools: Modernise your JavaScript codebase with DevTools

The new Copy as Fetch feature extends the Network Panel context menu. You can for example, right click on a network resource, and copy as cURL:

curl 'https://umaar.com/' -H 'authority: umaar.com'...

However, that command belongs in your terminal, rather than your codebase. Copy as Fetch provides Fetch API compatible syntax in JavaScript like the following:

fetch("https://umaar.com/", {
"credentials": "include",
"headers": {},
"referrerPolicy": "no-referrer-when-downgrade",
"body": null,
"method": "GET",
"mode": "cors"
}); await fetch("https://umaar.com/", {
"credentials": "include",
"headers": {},
"referrerPolicy": "no-referrer-when-downgrade",
"body": null,
"method": "GET",
"mode": "cors"
});

原文: Chrome DevTools: Color tricks in the Elements Panel

Dev-Tips的更多相关文章

  1. Android Dev Tips

    Ref:Android Service与Activity之间通信的几种方式 Ref:基础总结篇之五:BroadcastReceiver应用详解 Ref:Android Activity和Intent机 ...

  2. 超全的web开发工具和资源

    首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐!   平台信息 培训互动 ...

  3. Chrome 35个开发者工具的小技巧

    来源:w3cplus - 南北(@ping4god) 网址:http://www.w3cplus.com/tools/dev-tips.html 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览 ...

  4. chrome web开发工具

    顾名思义Chrome开发工具就是一个工具,它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面,也可以通过这个工具调试和测试Web页面或Web应用程序.有了这个工具,你可以做很多有趣的事情: ...

  5. 100+ 值得收藏的 Web 开发资源

    原文 http://mp.weixin.qq.com/s?__biz=MjM5OTEzMzQwMA==&mid=2651667152&idx=2&sn=1dd7a77a2eff ...

  6. Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集

    http://web.jobbole.com/89188/ 2016 – 对于未来五年内Web发展的7个预测 2015 – 我的前端之路:从命令式到响应式,以及组件化与工程化的变革 怎么成为一名优秀的 ...

  7. 干货100+ 最超全的web开发工具和资源大集合

    干货100+ 最超全的web开发工具和资源大集合   作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和 ...

  8. git 命令常用笔记

    1. 全局操作 git --version //git 机器上是否存在 git init --bare project.git //服务端:初始化一个新的仓库 chown -R zhangsan:zh ...

  9. 玩转渗透神器Kali:Kali Linux作为主系统使用的正确姿势TIPS

    Kali Linux 前身是著名渗透测试系统BackTrack ,是一个基于 Debian 的 Linux 发行版,包含很多安全和取证方面的相关工具. 本文假设你在新装好的kali linux环境下… ...

  10. 10 Interesting Linux Command Line Tricks and Tips Worth Knowing

    I passionately enjoy working with commands as they offer more control over a Linux system than GUIs( ...

随机推荐

  1. 洛谷P2045 K方格取数(算竞进阶习题)

    费用流 又是一道网络流的模型,对于这种费用与经过次数有关的边,我们经常把边拆成多条,比如这个题,第一次费用是x,第二次是0,我们就可以先把点拆成入点和出点,入点和出点又连两条边,第一条容量为1,费用为 ...

  2. 第一天:学会如何在pycharm上编写第一条robotframework用例

    ---恢复内容开始--- 1.python环境的安装和依赖包的下载

  3. 【AGC002E】Candy Piles 博弈论

    题目大意 有\(n\)堆糖果,第\(i\)堆有\(a_i\)个. 两个人轮流决策,决策分为两种: 1.选择糖果数最多的一堆糖果,并把这堆糖全吃了. 2.在每堆非空的糖果堆里拿一颗糖吃掉. 吃掉最后一颗 ...

  4. 【XSY2166】Hope 分治 FFT

    题目描述 对于一个\(1\)到\(n\)的排列\(a_1,a_2,a_3,\ldots,a_n\),我们定义这个排列的\(P\)值和\(Q\)值: 对于每个\(a_i\),如果存在一个最小的\(j\) ...

  5. bzoj 3123 [Sdoi2013]森林(主席树+启发式合并+LCA)

    Description Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数 ...

  6. npm config 删除变量

    问题 安装npm时,使用npm config set 命令重新设置了变量,但是设置变量时少了个空格,设置错了.使用npm config ls -l 查看环境变量 添加错的这一个,应该如何删除? 解决 ...

  7. 前后端分离之vue2.0+webpack2 实战项目 -- html模板拼接

    对于前后端分离,如何把一个页面的公共部分比如head, header, footer, content等组合成一个完整的html 是一个值得考虑的地方. 对于php,我们可以利用include加载其他 ...

  8. 「AtCoder Grand018A」Getting Difference(GCD)

    题目链接A - Getting Difference 题意 有n(1~\(10^5\))个数\(A_i\) (1~\(10^9\)),每次选两个数,将它们的差的绝对值加入这堆数.问k(1~\(10^9 ...

  9. Codeforces | CF1029D 【Concatenated Multiples】

    \(qwq\)昨天晚上\(Div.3\)过了这道题...早上交了\(1A\)...看在\(CF\)上\(hack\)的情况并不乐观而且也没人来交这题的份上...我决定发一篇题解帮\((zhuang)\ ...

  10. js日期格式转换的相关问题探讨

    探讨问题1: 如何将 2017年8月22日 转换成 2017-8-22 / 2017-08-22呢 '2017年8月22日'.replace(/[年月日]/g,'-'); '2017年8月22日'.m ...