Chrome/Chromium has a syntax highlighter in the inspector that shows black text while scrolling, and highlights after awhile - unlike Firefox Web Developer Toolbar's, which highlights everything and may take a long time. Since the inspector is written in js/html, is there a way to use this technology elsewhere?
Chrome's Devtools uses CodeMirror for the sources panel where you can edit code. http://codemirror.net
Yes, you can find the source code here:
https://developers.google.com/chrome-developer-tools/
Here are some instructions to get you started.
Also, check out Ace it's very easy to embed and use and does a decent job. Cloud9 uses it.
Related
I want to create my own color picker extention like color picker tool of chrome dev tool. Chrome's color picker tool is very nice. So my question is: how can i get chrome's color picker tool source code? Thanks a lot.
The color picker used in the devtool is a module listed here: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front_end/color_picker/
It is a relatively large module so I will not link it here nor recommend you to use it in your future extensions. However if you do have the patience, you can definitely pick out the parts that you need and use it under the licenses described in the files.
While Google Chrome is not an open source application, Chromioum is. You can download its entire open source here and try to extract the color pallet mechanisms.
Besides diving into this massive and complex code, you have plenty of other Javascript based color picker tools you can implement very easily. Take a look at
JColor, which I'm using myself and very satisfied.
Using this Javascript library will be much more easier than extracting and implementing the dev tools color pallete, it's a 2 line implementation, which will give you pretty much the same functionality:
<script src="jscolor.js"></script>
Color: <input class="jscolor" value="ab2567">
Besides that, You can search for more Javascript libraries out in the vastness of the internet.
Eye Dropper Tool:
I believe the color picker you are refering to is Google Chrome Eye Dropper tool. After looking into it, I think I found a GitHub page with a verified source code of this type of tool, if this is what you were refering to.
Source Code:
Below are two links. The first link is to the Google Chrome Webstore page, where you will find the Eye Dropper Tool. If this is the tool you were refering to, then the second link will be the source code for it.
Here is the Tool: https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
Here is the Source Code: https://github.com/kepi/chromeEyeDropper
Hopefully this helps you out!
Im currently working on a fork of the famous web developer extension (chrome, firefox, opera). Exactly I am working on the chrome extension.
The Firefox extension is shown like that:
Chrome instead shows only a icon...
..which toggles the "pretty small" widget:
A part of my goal with this fork is to change this toggle icon to a toolbar such as firefox does.
After studying the documentation chrome extensions (https://developer.chrome.com/extensions/devguide) I came to the result that this is not possible with default settings (browser actions, page actions,...).
When I looked again at the Table of Contents in the documentation I got an idea. There is the possibility to edit the bookmarks. So it could be possible to add an additional bookmark bar/row and place the single web developer actions as bookmark with the function on it.
Is this the right way for solving this? Because at the moment I only see possibilities with more or less dirty hacks. And doing it via bookmarks seems at least dirty.
PS: I also thought about this:
The plugin is actually the same on firefox and chrome and from the same author. So when this adaption of the toolbar in chrome would be easy possible then would not have such differences in the chrome and firefox addon.
Nope, that's simply impossible.
Chrome does not support custom toolbars, and that includes "an additional bookmark bar/row".
The closest, visually, would be injecting UI directly into the top of all pages. I don't think I need to explain why that is hacky.
can I use the html code highlighter from the browser to my website HTML code color "Inspect element" window code color without any plugins like codemirror?
Yes: all browsers have some kind of inbuilt developers tools that let you inspect a website's HTML, CSS and other components. The shortcut and method for activating them is different for each, but all of them have a 'highlighter' that allows you to click an element on the page in order to inspect it.
Read more here on using developer tools in all broswers -> http://devtoolsecrets.com/
Chrome's developer tools are arguably the most widely known, commonly used and most powerful. Shortcut is SHIFT + CTRL + J.
edit: in light of the comments below, it looks like OP is after a specific feature of Codemirror that lets you highlight syntax. This is not possible natively in browser.
I used tumblr's javascript embed code to embed my posts into an external website. Now I want to style the posts. Where can I find the full list of tags, classes, and all of that in order to do this? I see people posting some of the tags, for exampe ol.tumblr_posts, but no one has said how or where they actually found out that's the tag tumblr is using for that particular element.
Someone mentioned using the web developer extension in Firefox to pull out the HTML associated with the javascript file but I can't use Firefox so I need another suggestion? I did go to tumblr's docs but the tags and everything used for customizing themes WITHIN tumblr seem to be different from the ones used to display posts outside of tumblr.
I also looked around in the api section and didn't see anything that lists all of the tags. Thanks!
UPDATE: Here's a post that discusses what I'm talking about but none of the people giving answers that show what tags to use to format the script's output say how or where they got the tags.
tumblr javascript embed with css skin
This website is the one that said to use the FF add on but again, the person who figures out how to find the tags using it doesn't say HOW, they just say it worked. I'm finally in a place where I can use Firefox so I installed this web developer thing and I still don't see where I would go to see the info that shows the actual html with all the styles instead of just showing the link to the js code.
http://forums.macrumors.com/showthread.php?t=745299
Chrome and Opera's developer console is CTRL + SHIFT + I... try looking in the source there
IE's dev tools is f12 if you can't use Chrome
Also: I'm not sure if this is what you're talking about but I'll throw in this link for good measure:
http://www.tumblr.com/docs/en/custom_themes
I figured it out! Unfortunately, the only way I could do this was to use the Firefox Web Developer Toolbar Add-On. Once you have that installed, you go to the webpage where you've embedded your blog's javascript code.
Then, in the Firefox toolbar, there should be a tab that says "Miscellaneous". Click on that, then click on "Edit HTML". A new pane opens up towards the bottom of the browser. Inside, it will show the source of the webpage INCLUDING the information that the javascript code generates, which shows the classes, html, and all of that.
It's still not a ton that you can customize compared to using the api (which I don't know how to do) but it's a start. Thanks everyone!
Is there any tool or addon which can be used for testing or identifying Javascript functions in real time (i.e. on click or some events )..
e.g. on a website, I want to know after clicking on a link, which all JS functions are being called/executed..I know sometimes it is stragightforward from the code, but in case it uses JS libraries like jQuery, the actual function call is made from otside..
How can I do that?
*I'll really appreciate if, alongwith the addon, you just write a short description as to where can I find the Javascript finction tracking in that **
Thank you.
Try Firebug. It's one of the most useful firefox addons. Grab it here:
http://getfirebug.com/
Dragonfly (Opera), or Firebug extension for Firefox, or any other good javascript debugger
See Visual Event. It is a bookmarklet that overlays element event handler information.
FireQuery is available as a firefox plugin which adds handler information inside of firebug.
Firebug includes a JavaScript profiler. Give it a try.
http://getfirebug.com/javascript
In Chrome, right click the page and choose Inspect element, go to the console, start javascripting! Choose the scripts tag to get debugger functionality.