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 am
Today I find that the Profiles tab in Chrome development tool can help us to unveil the mysteries to some degree. In Chrome development, just select this checkbox:
And then execute the simple JavaScript code below:
var arr = [];
for (var i=0; i<1000; i++){
arr.push(i)
}
console.profile("Array toString");
for( var i = 0; i < 1000; i++){
var a = arr.toString();
}
console.profileEnd("Array toString");
Once done, you can see a profile record with the name specified in JavaScript code above, “Array toString”. Hover the mouse to the first row, “anonymous function”, we find the hint “array.js”.
Switch display style from Chart to Tree:
From here the callstack of native implementation of toString is displayed:
The next step is to look into in array.js. Launch url: https://cs.chromium.org/ Click this hyperlink:
now you can find the array.js file via path: src/v8/src/js/array.js
The callstack analyzed through the source code exactly matches the one we get in Chrome development tool Profile tab: ArrayToString will delegate to Join if current caller is an Array:
Join will call DoJoin:
DoJoin will first call UseSparseVariant to evaluate the possibility to perform Join via SparseVariant. If not possible, call ConvertToString as fall back. ( The line number of source code may vary with the one you see in Chrome Development Tool profile tab due to the different version of Chrome being used. )
If you could not tolerate the poor performance of this online source code repository, you could download the whole source code of V8 to your local laptop by cloning this github repository:
https://chromium.googlesource.com/v8/v8.git/
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关推荐
Chrome 开发者工具中文手册
Chrome开发者工具的功能很强大,要了解其所有功能最好是查看官方文档,但我们访问官方文档并不是很方便,因此这里将官方的英文文档打包成了CHM格式,可以下载到本机方便查阅,为了在CHM阅读器中接近原文显示效果和不...
用于说明使用 Chrome 开发人员工具进行基本 Javascript 调试的基本单页应用程序。 克隆回购 CD 进入“DevTools”目录 对于开发,运行grunt serve 当你准备好构建你的项目时,运行grunt build 玩得开心!
通过Chrome开发者工具调试Django应用
谷歌调试移动端工具chrome-inspect离线开发者工具包@194530_@196351.rar
Google Chrome 开发者版.zip
Chrome开发者工具指南.介绍Chrome开发。特么利于前端开发
由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿!
web developer(Chrome开发者工具扩展插件)是一款可以安装在谷歌浏览器上的chrome web developer轻量级开发插件,安装使用web developer插件可以让您的开发变得更加顺畅,需要的朋友欢迎前来下载使用! 插件概述: ...
Stetho 调试Android应用的桥梁,使得可以利用Chrome开发者工具进行调试
这篇文章告诉你如何通过用Chrome开发者工具(ChromeDeveloperTools)找到这几行关键的代码。我们来看一个简单的“颜色排序器”应用,这个应用展示了一个由各种颜色构成的网格,你可以拖拽这些颜色进行混合。每一个点...
weex-devtool-iOS使用Chrome开发人员工具对本机iOS应用程序进行远程调试启动首先,通过$ npm i安装[weex-toolkit] [电子邮件保护] -g然后运行命令:$ weex debug您可以看到QR weex-devtool-使用Chrome开发者工具为您...
如何使用chrome自带的Javascript调试工具
轻松玩转chrome开发者模式
chrome浏览器-vue开发者工具
这是vue3的开发者工具。使用:解压,然后拖拽到浏览器开发者工具里面即可
彻底禁用Chrome插件停用开发者模式提示插件,下载后将dll文件放在和Chrome.exe同目录然后重启浏览器即可。
主要给大家介绍了chrome开发者工具-timeline的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考价值,需要的朋友们下面来一起学习学习吧。
该工具为windows系统下Chrome浏览器伪装android浏览器和iphone浏览器的dll文件,覆盖相应的dll到chrome相应的dll目录下即可,可以伪装成手机浏览器访问网页,可应用web开发者调试网页。