我也要用
Chrome
汪子熙
JerryWang，2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师，SAP中国技术大使。2020年5月下旬，Jerry做了脑部肿瘤的开颅切除手术，对编程和人生又有了新的感悟。
-
原创 如何检查并unregister本地注册的Chrome service worker
如何检查？Check that there are no service workers registered in your app. If you do find any service workers, remove them.Chrome开发者工具，Application-> Service Workers->See all registrations：全部关闭：更多Jerry的原创文章，尽在：“汪子熙”:...2021-01-20 12:06:33
12
0
-
原创 Chrome开发者工具Cookie标签里看到的ga cookie是什么意思
如图：答案是和这个analytics.js有关，google家的东西。的实现原理
I use the following simple JavaScript code to illustrate:var JerryTestArray = [];(function(){ for( var i = 0; i < 100; i++){ JerryTestArray[i] = document.createElement("div"); }})();Create a new empty tab in your Chrome, and first2020-08-16 14:08:50
91
0
-
原创 Chrome开发者工具使用console.trace的一个小技巧
我们在Chrome开发者工具里调试的时候，有时需要把函数执行的调用堆栈信息保存到本地以便进一步处理：然而Call stack列表下的数据无法复制粘贴。其实，我们只需要在console控制台里，输入console.trace:这里打印的callstack是可以复制粘贴的：ctrl v到本地即可：更多Jerry的原创文章，尽在：“汪子熙”:...2021-01-08 19:28:11
38
0
-
原创 Chrome开发者工具一个有用的快捷键组合：Ctrl+Shift+E
看一个例子：选中下面的高亮代码：同时按下Ctrl+Shift+E，被选中的代码就会自动被粘贴到Chrome开发者工具控制台上并执行：2021-01-08 15:58:51
34
0
-
原创 小技巧：Chrome开发者工具里的Alt+单击
在Chrome开发者工具里单击一个元素左边的小三角符号，只会展开其继承结构的第一层直接子节点：而Alt+Click，可以将该元素第一个子节点，以及该子节点原型链上的节点全部展开。将下图和上图进行比较：更多Jerry的原创文章，尽在：“汪子熙”:...2021-01-04 20:07:48
25
0
-
原创 如何通过Chrome直接创建SAP CRM Opportunity的文本
Since we need to use HTTP post for note creation, it is necessary to get a CSRF token first. Use the following settings in Chrome extension Postman to fetch a CSRF token:{a.focus()},5000);执行之后，手动把焦点重新从Chrome console恢复到浏览器里，在浏览器空白处随便点击一下，五秒之后，Edit按钮的2020-12-11 21:47:17
60
0
-
原创 一个好用的查看Angular应用ngrx状态的Chrome扩展：Redux devTools
Redux DevTools：https://chrome.google.com/webstore/detail/lmhkpmbekcpmknklioeibfkpmmfibljd安装完毕后，在Chrome开发者工具里会多出一个Redux面板：以及在Chrome右上角的扩展工具栏里，会点亮Redux DevTools对应的图标。此时在redux面板里即可方便的查看ngrx相关的state和action：可以输入关键字进行过滤，比如查看和Currency加载相关的action：action2020-11-22 21:18:28
50
0
-
原创 使用Chrome开发者工具研究JavaScript函数的原生实现原理
As the size of my blog Chrome Development Tool tips used in my daily work turns to be larger I create a separate post to record down this small tip.Are you curious about the “native code” here? At least I amToday I find that the Profiles tab in Chrome d2020-08-22 16:21:42
225
0
-
原创 Chrome开发者工具network标签页里的transferred over network和resources loaded by the page的区别
如下图所示：network底部有1.1 MB transferred over network和5.1 MB resources loaded by the page. 这两个大小有何区别？有中文博客介绍说transferred over network是通过网络加载的资源尺寸，而resources loaded by the page不仅包含前者，也包含直接从浏览器缓存里加载的资源尺寸。这种说法不完全准确，更精确的说法是，resources loaded by the page统计的是前端页面加载的2020-11-02 13:18:16
933
2
-
原创 在Chrome开发者工具里手动测试element focus效果
在element标签页的styles里，选中:focus即可：2020-11-05 16:54:12
66
0
-
原创 Chrome扩展应用Angular state inspector的使用方法
在Chrome Web Store上安装这个扩展：Angular state inspector打开一个Angular应用，在Chrome开发者工具的Elements标签页里，多出来一个State标签，可以查看当前Angular应用的绑定信息：在内部属性__ngContext__里，可以看到Angular的版本号：在Chrome开发者工具的console里，打印$state也可以显示这些绑定模型的值：可以直接在state标签页里修改模型的值，不能立即生效：需要手动在console里执行$2020-08-17 17:24:36
380
0
-
原创 html页面和Chrome开发者工具elements界面不一致的一个可能原因：没有在Chrome开发者工具里打开对Shadow DOM显示的支持
一个例子：虽然UI上input field里显示的是Jerry，但是Chrome开发者工具里面并没有显示出来。注意上图最下方，显示的input后面有#shadow-root.div.打开settings elements区域的"Show user agent shadow DOM"即可：现在能够在Chrome开发者工具里看到这个shadow DOM了：要获取更多Jerry的原创文章，请关注公众号"汪子熙":...2020-10-06 22:58:46
310
0
-
原创 介绍一个Material设计风格的Chrome开发者工具增强扩展
看腻了千篇一律的Chrome开发者工具外观？最近我试用了一款Chrome扩展，可以将Chrome开发者工具外观替换成Material设计风格，用了一段时间觉得不错，这里介绍给大家。Chrome扩展名称：Material DevTools Theme Collection安装之后，在Chrome开发者工具设置里启用Allow custom UI themes即可：重新启动Chrome，就能看到这个酷酷的暗黑风格了：要获取更多Jerry的原创文章，请关注公众号"汪子熙":...2020-10-13 13:39:57
334
0
-
原创 有用的Chrome扩展介绍 - Octotree - GitHub code tree
明细：安装之后，Github网站左边会自动出现类似Visual Studio Code的代码显示方式，可以通过树形结构方便地浏览代码，无需重复点击文件夹进入。树形结构里的图标可以使用各种不同的风格显示：快捷键：上箭头按住不放+S, 可以触发搜索功能：丰富多彩的颜色主题可供选择：更多Jerry的原创文章，尽在：“汪子熙”:...2020-11-05 10:21:31
89
0
-
原创 Chrome浏览器里的-webkit-focus-ring-color
我最初认为，下图的forms.scss会被其他的scss引用，然而根据forms.scss在整个项目进行搜索之后，没有发现任何文件引用到forms.scss:使用专业的文件搜索工具，发现最后生成的styles-es2015.js里包含了forms.scss:将SAP Spartacus :focus相关的scss都注释掉，会发现如今SAP Spartacus会使用浏览器默认的user agent stylesheet来渲染:focus效果：默认情况下，outline的颜色是-webkit-foc2020-11-12 16:11:15
119
1
-
原创 一个好用的Chrome倒数计时器扩展 - Calendar and Countdown
作为程序员，我采用番茄工作法，需要在指定的时间段内完成一些任务，比如30分钟之内，完成单用测试用例的编写，因此我需要一些软件或者Chrome扩展来帮助我完成倒数计时的任务。我在Chrome webstore上找到了这款扩展：Timer使用非常方便，指定倒数计时的时长，比如半小时，点击开始按钮Start即可：开始之后，浏览器会显示一个倒数计时的进度条，同时浏览器右上角出现一个小钟的图标，并且以绿色的数字显示倒计时的剩余时间，非常直观。可以随时用Stop，Resume和Restart来控制倒计时的2020-11-12 16:52:06
92
1
-
原创 Chrome开发者工具Element style里的Computed标签页
View only the CSS that’s actually applied to an element根据Chrome开发者工具文档介绍，styles标签页里显示的是所有施加到一个HTML element的CSS rules，包含被overriden过的rule. 如果对这些被覆盖的rule不感兴趣，可以切换到computed标签页，这里只列出真正生效的rule.The Styles tab shows you all of the rules that apply to an element,2020-11-03 22:10:02
99
0
-
原创 浏览器的User Agent Styles
Every browser has a predefined set of styles used as an initial base point when rendering a web page. These styles are commonly referred to as User Agent Styles. In the Chrome Dev tools, these styles are denoted by a gray background.https://stackoverflo.2020-11-03 18:30:18
59
0
-
原创 different color in Chrome Development Tool
https://stackoverflow.com/questions/43599974/why-does-chrome-devtools-show-these-folders-in-orange-and-in-italics 在IE里url带了单引号：https://jerry.neo.ondemand.com/dps/odata.svc/Contex...2019-06-15 18:44:23
1092
0
-
原创 Provisional headers are shown in Chrome network tab
# Created by Wang, Jerry on Oct 15, 2015细心的同学应该留意到，新版开发者工具的 Network 面板中，某些请求头后面会跟着下面这行文字：2. 和Chrome里的network tab一样，S...2019-06-18 10:42:55
551
0
-
原创 React的source code init时会自动检测Chrome dev tool的react extension装了没
# Sent: Friday, 19 February, 2016 5:41 PMReact的source code init时会自动检测Chrome dev tool的react extension装了没，如果没装会在console里打一个message提醒。The url itself is correct, the issue is now wrong http method is issued:![cl...2019-06-18 11:05:54
522
0
-
原创 VM stack in Chrome
http://stackoverflow.com/questions/17367560/chrome-development-tool-vm-file-from-javascriptit says:[VM] (scriptId) has no special meaning. It's a dummy name to help us to distinguish code which ...2019-06-18 11:05:54
146
0
-
原创 使用Chrome的inspect element注意事项
# Created by Jerry Wang, last modified on May 30, 2014* icf_notify_poll.js* nty_poll* nty_polling_request_object* CRMC_IC_POLLPROF当使用Chrome的右键菜单选项"Inspect element"时，2019-06-19 10:04:49
103
0