Pls Don't Mis-understand
I know there are tons of questions about how to locate the position in the sourcecode via the sourcemap. But this question is NOT about that.
My Question
When debugging in chrome with sourcemap, it will pause at the breakpoint I set, then how can I find the corresponding position in the minified/uglified js file?
Why I Need That(The corresponding position in the minified/uglified js file)
I need to hack some code before/after that line in the minified/uglified js file if I don't have the original build env.
Thanks.
Related
In Studio Visual Code I'm using SASS and when working on my .scss file if I add something like:
grid-template-columns: repeat(3, 1fr);
for a section tag and save - the corresponding css file is changed to the following:
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
I would like to know why it gets changed with the extra line of code inserted before what I typed.
Looking elsewhere from examples it seems on css alone my syntax is correct, otherwise I would have assumed Visual Studio is trying to do some code correction. I have a hunch but don't know what it's about that the prefix -ms has something to do about it and is the clue I can't figure out why or how to stop doing this.
The odd thing is if I type what I want directly in the css file it gets displayed with no errors in VS,
but VS's own code addition to my css file shows up as errors - like it didn't change it properly, whatever it's trying to do.
Anyone able to shine some light on this is appreciated. Thanks.
I would like to self-host my vector maps. I am using some custom fonts and also some custom icons.
When I create a style in Mapbox Studio and export it later I will have the following two lines inside my styles file:
"sprite": "mapbox://sprites/<user>/<token>/<token>",
"glyphs": "mapbox://fonts/<user>/{fontstack}/{range}.pbf",
My question now is how do I create those files myself? I have a folder containing my .svg and my .ttf files. But how do I now get them into the format I need?
I tried https://github.com/openmaptiles/fonts for the glyphs part, but can't get that running. And then I found https://github.com/mapbox/glyph-pbf-composite but don't understand how it should work.
The easy method is to:
add the svgs and fonts into a MapBox style
open a test map in a browser
inspect the Network calls with the browser's dev tools. Find the calls to get the sprite and glyph files
open those URLs in a new browser tab and save the files that are downloaded
Otherwise if you want to generate the files without using MapBox Studio:
You'll use two utilities as outline in the instructions from https://openmaptiles.org/docs/style/mapbox-gl-style-spec/
Sprite file generation: SpriteZero CLI - https://github.com/mapbox/spritezero-cli
Glyph file generation: genfontgl - https://github.com/openmaptiles/genfontgl
Finally, when defining the path to the files you do still need the tokens in the glyphs path even though you aren't using them. So something like
"glyphs": "/data/myfonts.pbf?{fontstack}{range}",
I have problem with debugging js code written in js bin with chrome.
Everytime when i edit/click run with JS new source file is generated and old breakpoint are not being hit.
Do you have any solution for this problem?
Just use a debugger statement in your code. Even though jsbin will give you a warning and won't autorun, you can still click the run button (or press ⌃⏎) and your code will pause on the debugger statement.
You can also look on the Sources tab for an item called (no domain). The file inside it has your JS and you can set breakpoints.
It is under runner - JS Bin Output - (no domain) - leduzidigo.js
Say I want to look at an object and so I log it to the console:
console.log(theNoticeObj);
Then using Chrome Dev Tools, I inspect it in the console and change its property theNoticeObj.bounceHeight to 10px
Now if I want to trigger theNoticeObj.bounce() on that object immediately to locate it, is there an easy way to do that from the console?
Thanks
EDIT:
Breakpoints where suggested below, but this freezes execution.
In face what I want is the command line API to work with javascript objects, not just DOM elements. If that were possible I'm sure I would be able to find it. I might go and see if there are any feature requests to that end for chrome.
https://developers.google.com/chrome-developer-tools/docs/console#using_the_command_line_api
Try adding window.tno = theNoticeObject under the console.log statement. Reload the page and see if you can execute tno.bounce() from the console. If theNoticeObject is still in scope, this should work.
You can navigate to the Sources tab and open your javascript file containing the piece of code you want to play with, in this case let us assume it is
console.log(theNoticeObj);
Once you find this line, you can set a breakpoint at this point and when your program execution comes to this line it will halt.
You can then use the Console tab to do operations on all the javascript objects in current local scope, window scope. You can simply call:
theNoticeObj.bounce();
It executes in the current context reflecting changes on the screen.
Hope this helps.
Now you can right click any object in the console and use "Store as global variable".
A new console line appears with the name of a new global variable holding reference to the selected object.
I am using Eclipse to work on a large Flex project. Whenever I have an error in an actionscript file, it shows nothing in the "Flex Errors" section of Markers but when I open the file that has the error it shows a question mark next to the line where the error actually is.
Is there a way to show these questions marks in the markers section of Eclipse?
Let me know if you need more information!
If you roll your mouse over the question mark, it should show details. Question marks were introduced in Flash Builder 4.5, I believe. They are a kind of "highlight problems as you type."
Often these question marks will turn into yellow exclamations (AKA Warnings) or red Xs (AKA Errors) on saving the file.
However, if you using the include directive to include one ActionScript file inside another, it may show these question marks in the include file, even though there isn't actually a problem.