Sometimes when I create a new snippet in Chrome devtools its icon has a green dot at the lower right. Sometimes the same thing happens when I edit a snippet. I haven't used snippets in a few months, and I remember there was something I did that made the dot go away, but I can't remember what it was.
What is the significance of the dot? What am I supposed to do when I see one? I looked at lot of web pages describing the use of snippets and even a few videos, and I found no mention of this dot in any of them. Furthermore, the new snippets the videos showed being created did not get a green dot on their icon.
The green dot means that file is linked to the source file within a workspace. It allows you to edit the file in the Dev Tools editor and the source file will be updated with those changes.
Chrome dev tools. Edit and save with Workspaces
Related
I'm a newbie to learning code and I'm currently doing well learning from resources such as treehouse.
However, I would also like to learn from other developers. I have found a few sites that interest me with their build.
I wondering is there any way to view the source code as it was written.
for example when I view the source code by clicking the right mouse button then view source code it appears all on one line squashed together instead of spreading out making the code hard to read.
Here is an example of what I am talking about;
Example of code squashed together
I wondering whether there is an add-on or plugin that will separate out
the code into easily readable chunks so I can learn from it.
You can paste the code to this website http://jsbeautifier.org/ and 'beautify' it. There are also some addons/extentions mentioned for Chrome browser.
In the dev tools window that pops up if you click the Source tab and click a file on the left then click the curly brackets at the bottom of the code window it puts it into a readable format
Right click an element in the page and select "Inspect" to view the DOM as rendered - this isn't the same as the source code, but may be a better indication as (for modern sites) source may be built up by a combination of raw HTML and JS.
When you're viewing JS or CSS look for a {} icon in the bottom left hand corner of the panel - this will pretty print the JS while still letting you step through it.
You can use this with your CSS too:
Go to http://solid.paris/assets/css/styles.min.1490894140.css
Open the Chrome dev tools (CTRL+SHIFT+I)
Click sources at the top of the tools
Select the CSS from the left hand tree view
Click the {} in the bottom left corner
I have an issue with the Chrome developer tool.
My version is Version 46.0.2490.71 (64-bit)
According to online tutorials, I can go to Sources tab, right-click a script file and there will be Blackbox Script option to choose.
However, I see no option in my chrome. How do I enable that option since I have no knowledge about regex?
Another problem: The scripts still got debugged even though I added them to blackbox list. Weird!!
One more thing i want to ask is how I blackbox an "unlimited" amount of VM files?
Open devtools settings (press F1 once in devtools or open from the menu)
Go to blackboxing (see image below)
Add a pattern, for example:
node_modules
angular
rxjs
It uses regex syntax in case you need something more specific.
The nice part about blackboxing library/framework scripts is that it makes it easier to see in stacktraces from where the error was triggered in your own sources.
EDIT
As other pointed out, since this answer was posted you can directly blackbox a script with a right click on the source file in devtools.
However head off to the blackboxing settings UI for more control.
There's an easier way in Chrome 60 (and possibly older):
Open the source file in Chrome dev tools (in the source tab)
Right Click the column that displays the line numbers
Select "Blackbox Script"
EDIT: As svict4 pointed out, in Chrome 64, you can also right click anywhere on the script
It seems they changed from blackbox to Ignore List.
Also press f1 in devTools and find Ignore List
Not sure if Chrome has changed too, but on Chromium Edge, the option is named "Mark as Library Code" and "Mark as my Code" to disable it. You have to right click on the code and not on the file/tab. Right clicking on Line numbers works too.
I have a bundled and minified file and a source map. I added this source map in the chrome dev tools by right clicking in the source and selecting Add Source Map.... That seems to work (although I suspect that something is getting mixed up). The original files now appear in the devtools. But now some of the lines have a gray background (e.g. line 17 in the screenshot below). What does this mean?
The gray background indicates that the source map doesn't include those lines. Sometimes source map generators only supply source mapping for lines that differ or have the potential to differ from the underlying code. In these cases, unmodified lines will have a gray background.
See https://github.com/babel/babel/issues/1318 for an example of this.
Also see What are these grey lines in the Chrome sources panel? for a similar question.
I have a rogue blank <div> getting inserted from somewhere in my code, and it is difficult to find when it is coming in. I am using debugger; and stepping through the code, however, the step function is in the 'Sources' tab of chrome dev tools, and the 'Elements' tab has the view I need. I have two screens, and have the dev tools on one screen and the page on the other, but I need to see when the div is coming through on the HTML as I step through the code, and it is quite cumbersome to switch tabs after each click.
Is there any way to accomplish this view to troubleshoot faster (maybe a second instance of dev tools? or split the tabs?), or another suggestion? Since I don't know how it is getting generated, I can't color the div and just look for the color to come on screen...
It is still not possible to display the elements and source tabs at the same time on chrome dev tools. (Latest Chrome version: v64).
If some element is inserted to your DOM and you want to find code responsible for adding it then I suggest using more appropriate tool than debugger;. Check out "subtree modifications":
You can now right click the view tab and select "Move to bottom" so you can see both element and sources at the
Now its possible to view the element and page source in the same page.
Follow the steps below:
Open debugger or Ctrl+Shift+C
From Right corner press the "customize and control Dev tools" icon, under those option click show console drawer:
Now from the left bottom, click on the quick source option as shown in picture:
All the js files opened in sources will be seen here:
In Chrome, you can edit your resources in line and Chrome will generate revisions of that resource. Here the documentation: http://code.google.com/intl/en-US/chrome/devtools/docs/elements-styles.html#persist
Sadly, it's not working here, and I don't know how to enable it. It is not possible to expand the file in the resource tab to see the revisions.
Using Chrome 15.0.874.121 on MacOS here. A colleague of mine tried the developer channel, but it's still not there. But I saw a demo of it at the Google Developer Day.
This works in 15.0.874.121 as well -- just double-click on a text content of a CSS or JS file in the Resources panel, type something and press Cmd+Enter. You will see the lines that you added displayed with a green background, and the edited resource on the left will become expandable.
Alternatively, the Dev channel has an "Edit" button (a pencil with dots) below the resource contents if the resource is editable. You can click it to toggle the resource editing.
It works fine on ToT and on dev channel 17.0.942.0 dev.
The scenario.
open inspector's Scripts panel
start editing with double click
save the revision with Cmd+S
optional exit from editing mode Shift-Enter
open Resource Panel
click on the right arrow symbol close to edited file.