As you see ,I installed it on my Chrome.
But there isn't react tool on my development tools
Currently, It's not possible to have React Dev Tools in Chrome. Please have a look at this official link:
http://facebook.github.io/react-native/docs/known-issues.html#content
It's currently not possible to use the "React" tab in the devtools to inspect app widgets. This is due to a change in how the application scripts are evaluated in the devtools plugin; they are now run inside a Web Worker, and the plugin is unaware of this and so unable to communicate properly with React Native.
However, you can still use the Console feature of the devtools, and debugging JavaScript with breakpoints works too. To use the console, make sure to select the ⚙debuggerWorker.js entry in the devtools dropdown that by default is set to .
There is also an open issue on github. Please have a look at this as well:
https://github.com/facebook/react-devtools/issues/229
React Native now runs within a Web Worker on Chrome so that it gets a more pure and isolated JS environment that more closely mimics JSC on the device but this breaks the React devtools. #skevy pointed this out and I didn't see a task open yet. The fix might need to happen on the RN side but I figured that people thinking about the devtools are more likely to have a solution come to mind.
Repro: Run an app with RN master, run it in the Chrome debugger, try to use React devtools but "React" option doesn't show in the Web Inspector.
It's enabled only if your webpage is using react, I'm using it now.
Related
Is Chrome's UI actually created in HTML? If so, is it possible to inspect that HTML?
I'm working on a project that involves mocking browser UI.
Chrome is not written in html so this is not possible. But it is based on the open source project Chromium so the source code is available to look at http://www.chromium.org/
We have a Chrome extension that can be used to open a page into our website. From there the user then continues onto the next page which has a custom NPAPI plug-in embedded in it. This has always worked fine. However, since the version 32 update the plug-in loads and runs (it's a video conferencing plug-in and is clearly running as the other side can see video) however it doesn't show up on the page. Examining the DOM everything looks fine. Grabbing the border and re-sizing the browser will cause the plug-in to suddenly render correctly. I've tried all manner of javascript/css tricks to try and mimic this behavior as a workaround but nothing works. Tabs opened manually (not using chrome.tabs.create) work fine.
This worked up till 32.
Any ideas around this?
Chrome 32 is phasing out NPAPI, read the announcement here.
There is a deprecation guide that you can read here.
It seems like Google wants you to use it's Native Client tech to run native compiled code on user's machines. It is cool stuff...but so far I've found it difficult/more limiting to work with when compared to NPAPI (but there are obvious upsides, security for instance).
You could also build a native app and use native message passing to communicate from extension -> app. Once downside to this is that there is currently no way to bundle a native app into an extension install, so the user will need to download and install your app separately.
This is a question about debugging a project, not about writing the code.
I am on the final stages of developing an HTML5 web app. Fairly last minute, our client tells us it should run on IE8. Since I use the HTML5-canvas in the app, this required the addition of Google Chrome Frame. Once installed and testing, however, IE8's developer console no longer prints any data, and the HTML viewer never loads. Is this a bug? Is there a way to fix it? It will really suck if I need to debug with alerts...
From Google Chrome Frame documentation:
You can use the Web Inspector in GCF just as you would in the Google Chrome browser. To use it, right-click and choose "Inspect Element". Logging is available via the console.log method, and you can set breakpoints and inspect network activity.
Early on I was doing some debugging and testing using the chrome dev tools(known as inspect element). I found out that on the Resources column of the dev tool, Chrome can always access the resources from the server and display them(links, videos, images....). Just wonder how Chrome does that. Is there any way to write a piece of code doing the same thing(access the server resources of other websites, not modifying them but displaying, stuff like, the link of the video currently playing on the website, which usually does not pop up until the play button is hit)?
DevTools doesn't fetch resources from a site. It fetches them from the browser.
There were similar questions already
How does webkit/chrome's WebInspector Resources Inspection work?
and
Getting Information from Google Chrome's Developer Tools
The Chrome Developer Tools has two parts frontend (html+javascript) and backend (C++) and there is an API which specifies the protocol between these parts. You can see the specification here. You can use it for writing your own app instead of standard DevTools frontend.
Also there is experimental debugging API for chrome extensions.
I think the Webkit WebInspector go over the hole source code and match all resources of the source.
So it match <link href="something.css"> and then it place something.css in the resource panel under stylesheets. And exactly the same thing for the other tags.
It's not hard to make regexes for this.
For the last few years I have been using Firefox, Firebug, and the Web Devevloper Firefox toolbar for all my web dev needs, quite happily. I am, however, very interested in experimenting with moving my web dev support over to Chrome, but I have no idea where or how to start. How much functionality is build into Chrome and how do I access it? What add-ins do I need and where do I learn about using them?
These are two of many questions I think face most web devs moving into a much less familiar environment. I'm trying to ask a broader question here, along the lines of, what do I need to use and know for effective web deb and JavaScript debugging in Chrome and where is best to learn what I need to?
Google Chrome (as well as Safari) has really underestimated Developer Tools feature. Lots of developers are indifferent to it and use Firebug through habit. (to no purpose!)
But for me it is the main debug tool: it looks more pleasant than the latter and includes a way cooler features. (e.g. Timeline — separate time intervals for Loading, Scripting and Rendering).
Developer Tools Tutorial.
Can't give up with Firebug? Have a look — Firebug Lite.
More tools.
→ Webmaster tools;
→ Speedtracer;
→ Page Speed.
→ From google webmasters-faq:
There are several tools to help you test your website in Google Chrome:
Web Inspector
Right-click on any component on a web page to launch the web inspector. You'll be able to see the elements and resources associated with the component on which you clicked, including a hierarchy view of the DOM and a JavaScript console.
Task Manager
Select the Page menu icon, then Developer > Task Manager (or press Shift+Esc). The task manager shows all running Google Chrome processes, and the resources that they're using (memory, CPU, and network).
JavaScript Debugger
Select the Page menu icon, then Developer > Debug JavaScript. This launches a JavaScript debugger that can be used to attach to existing processes.
in chrome: right click and "Inspect Element"
the Light Version of Firebug is available too.
While in Chrome, press Ctrl+Shift+I and start experimenting. It's all you'll need.
The Web Developer port from Firefox is very handy.